HTML&CSS基础-清除浮动

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.查看浮动效果

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>清除浮动</title>

        <style>

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

                /**

                 *     设置box1相左浮动

                 */

                float: left;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                /**

                 *     设置box2相右浮动

                 */

                float: right;

            }

            .box3{

                width: 300px;

                height: 300px;

                background-color: deeppink;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

二.查看清除浮动效果

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>清除浮动</title>

        <style>

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

                /**

                 *     设置box1相左浮动

                 */

                float: left;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                /**

                 *     设置box2相右浮动

                 */

                float: right;

            }

            .box3{

                width: 300px;

                height: 300px;

                background-color: deeppink;

                /**

                 *     由于受到box1和box2浮动的影响，整体向上移动300px

                 *     我们有时希望清除掉其它元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。

                 *

                 *     clear可以用来清除其它浮动元素对当前元素的影响,它有以下可选值:

                 *         none:

                 *             默认值，不清楚浮动

                 *         left:

                 *             清除左侧浮动元素对当前元素的影响

                 *         right:

                 *             清除右侧浮动元素对当前元素的影响

                 *         both:

                 *             清除两侧浮动元素对当前元素的影响，明确的说是清除对它影响最大的那个元素的浮动

                 *

                 * 案例如下:

                 *     清除box1的浮动对box3的影响，但是并没有清除box2浮动对box3的影响

                 *     清除浮动以后，元素会回到其他人元素浮动之前的位置。

                 */

                clear: left;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

HTML&CSS基础-清除浮动的更多相关文章

  1. CSS基础 清除浮动

    1.单伪元素清除法:清除浮动 .clearfix::after{             content: '.';             display: block;             c ...

  2. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  3. css基础（浮动 清除f浮动）

    文档流(标准流) 1.元素自上而下,自左而右  2.块元素,独占一行,行内元素在一行上显示,碰到父级元素的边框换行   浮动left 浮动的框可以向左或是向右移动,直到它的边缘碰到包含框或是另个浮动框 ...

  4. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  5. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  6. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  7. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  8. div+css之清除浮动

    当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

  9. CSS之清除浮动

    一.清除浮动的目的. 1.当一个父元素的高度不写或为auto时,而且这个父元素内又有浮动的子元素,那么这时候该父元素的高度将不会自动适应子元素的高度,也可以说高度是0px; 有如下代码: <di ...

随机推荐

  1. Nginx - upstream sent invalid chunked response while reading upstream 异常问题

    一个 post 的请求,直接调接口服务数据正常返回,但是通过 nginx 代理后, 什么都没有返回. nginx 配置如下: 使用 postman 调用,返回如下: 于是检查日志报错信息,如下: ng ...

  2. LODOP设置打印份数及是否逐份输出

    LODOP中通过SET_PRINT_COPIES可以设置打印份数,例如:LODOP.SET_PRINT_COPIES(2);//指定份数为2份 如果一个任务里有多页,打印份数的时候,有两种输出方式,一 ...

  3. 使用sql语句创建和删除约束示例代码

    使用sql语句创建和删除约束  约束类型 主键约束(Primary Key constraint) --:要求主键列数据唯一,并且不允许为空.  唯一约束(Unique constraint) --: ...

  4. 解决Adobe cs6系列软件在Windows10操作系统中无法正常运行问题

    大家好,我是安德风,很高兴今天能给大家一起解决Adobe cs6系列软件在Windows10操作系统中无法正常运行的问题.今天我以Adobe Photoshop cs6在Windows10环境安装运行 ...

  5. 最新 博盾习言java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 博盾习言等10家互联网公司的校招Offer,因为某些自身原因最终选择了 博盾习言.6.7月主要是做系统复习.项目复盘.Le ...

  6. yarn 的常用命令

    初始化新项目yarn init添加依赖包yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]将依赖项添加到不同依 ...

  7. 01 web概念概述

    1.JavaWeb: 使用Java语言开发基于互联网的项目 2.软件架构:(1) C/S: Client/Server 客户端/服务器端在用户本地有一个客户端程序,在远程有一个服务器端程序如:QQ,迅 ...

  8. js多种去重的方法总结

    第一种是比较常规的方法 思路: 1.构建一个新的数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比 3.若结果数组中没有该元素,则存到结果数组中 Array.pro ...

  9. java当中JDBC当中请给出一个sql server的dataSource的helloworld例子

     [学习笔记] 4. sql server的dataSource的helloworld: import java.sql.*;import javax.sql.*;import net.sourcef ...

  10. C++中数组占用的内存计算

    在C++中int类型每个空间是4个字节,long long int 是8个字节,而bool类型是1个字节 所以一般能用bool就别用int,节约空间 数组占用内存的计算 a[1001][1001]的空 ...