五、深入理解清除浮动

一、浮动的本质

浮动的核心只有一句话：浮动元素会脱离标准文档流向左/向右浮动，直到碰到父元素或者另一个浮动元素。

二、浮动的特征

2.1浮动会脱离文档

也就是说浮动会脱离原来文档流所在的层级，进入更高的层级。它在更高的层级上会忽略标准文档流中的元素，向左向右直到碰到父元素或者另一个浮动元素。同时在标准文档流中，剩余的元素也会当做该浮动元素不存在。
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            border: 5px solid red;
        }
        .box1 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            /*float: right;*/
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }

    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <!--<div style="clear: left"></div>-->
</div>
</body>
</html>

运行结果：

image.png

分析：在以上示例中，第一个和第二个元素向右浮动，第三个元素未设置浮动。这时候第一个元素碰到边框元素停下，第二个元素碰到第一个元素停下，第三个元素仍然在标准文档流中，并且认为第一个第二个元素的位置为空。

2.2浮动可以内联排列

示例代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            border: 5px solid red;
        }
        .box1 {
            float: right;
            width: 100px;
            height: 200px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }

    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <!--<div style="clear: left"></div>-->
</div>
</body>
</html>

运行结果如下：

image.png

分析：当放大或者缩小浏览器的框会有不同的显示效果。这是因为浮动会向左向右浮动，直到碰到另外一个浮动元素为止。这是浮动可以内联排列的特征。这个特征介于inline和block之间，类似于inline-block的效果。

2.3浮动会导致父元素坍塌

出现这个情况的原因是浮动元素会脱离标准文档流，并不占据标准文档流的位置，而标准文档流中的其他元素会占据浮动元素的位置，当没有其他元素的时候，父元素就不能被撑开，所以就没有了高度。
示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            border: 5px solid red;
        }
        .box1 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <!--<div style="clear: left"></div>-->
</div>
</body>
</html>

运行结果：

image.png

分析：从运行结果可以看出，父元素坍塌了。

三、深入理解clear属性

clear属性不允许被清除浮动的元素所在行的左边/右边有浮动元素（从浏览器界面上来看），底层原理是在被清除浮动的元素上边或者下边添加足够的清除空间。
同时，我们是在通过在别的元素上清除浮动来实现撑开高度的，而不是在浮动元素上。

3.1在浮动元素上加上清除浮动的属性

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            border: 5px solid red;
        }
        .box1 {
            float: right;
            width: 100px;
            height: 200px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            float: right;
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3" style="clear: both">3</div>
    <!--<div style="clear: both"></div>-->
</div>
</body>
</html>

运行结果：

image.png

结果分析：首先，可以观察到父元素还是坍塌了；其次，在浏览器的显示界面上，左边明明还有很大的空间，但是3号元素并没有靠着2号元素去排列，而是排列在了下面。导致这样的结果出现的原因是：虽然在3号标签上加了清除浮动，但是3号元素同时设置了浮动属性，导致了这个清除浮动效果在浮动元素的那个层级生生效了，并没有在标准文档流里面生效。

3.2综合示例

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            border: 5px solid red;
        }
        .box1 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <div class="box3">1</div>
    <div class="box1">2</div>
    <div class="box1">3</div>
    <div class="box2" style="clear: both">4</div>
    <div class="box3">5</div>
    <div class="box3" style="clear: both">6</div>

</div>
</body>
</html>

运行结果：

image.png

结果分析：1号框是正常的，没有浮动；2号框设置向右浮动，但是它并不跟1号框同行，相当于在2号框的上外边画一条横线，跟上面隔离开，然后在剩下的界面上开始浮动；3号框设置向右浮动，就是一个普通的浮动；4号框设置向右浮动和清除浮动，不跟2、3号同行，相当于在上面画一条线，从下面开始浮动；5号框是一个普通框，可以看到它补充了2、3、4号框的位置；6号框设置了清除浮动，可以看到它相当于在4号框下面画了一条线，然后补充进在标准文档流的位置。同时，可以观察到父元素的框并没有垮掉，这是因为有最后的1、5、6号元素。当把6号框注释掉的时候，父框的高度只到5号框那个地方。当注释掉5、6号框的时候，父框高度只到1号框那个地方，当这三个框都注释掉的时候，父元素坍塌了。
上面这个示例包含了四种情况：1、什么都不设置（1、5）；2、只设置浮动（2、3）；3、只设置清除浮动（6）；4、同时设置浮动和清除浮动（4）。

四、解决父级边框塌陷的方法

浮动元素后面加空div
设置父元素的高度
父级添加overflow属性
父级添加伪类after

4.1在标准文档流中的剩余元素上清除浮动实现撑开高度

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father {
            border: 5px solid red;
        }
        /*.father:after {*/
            /*content: "";*/
            /*display: block;*/
            /*clear: both;*/
        /*}*/
        .box1 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="father">
    <!--<div class="box3">1</div>-->
    <div class="box1">2</div>
    <div class="box1">3</div>
    <div style="clear: both"></div>
    <!--<div class="box2" style="clear: both">4</div>-->
    <!--<div class="box3">5</div>-->
    <!--<div class="box3" style="clear: both">6</div>-->
</div>
</body>
</html>

运行结果：

image.png

分析：在上面这个例子中，是通过给一个空元素加上清除浮动属性实现了高度撑开。
注：这种方法需要你在浮动元素后面加上一个空div，这样会造成元素的浪费；同时当结构是ul-li元素的时候，因为ul标签里面只能有li标签，你不可能在ul标签里面加入div空元素。

4.2设置父元素的高度

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            height:50px;
            border: 5px solid red;
        }
        .box1 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <!--<div class="box3">1</div>-->
    <div class="box1">2</div>
    <div class="box1">3</div>
    <!--<div class="box2" style="clear: both">4</div>-->
    <!--<div class="box3">5</div>-->
    <!--<div class="box3" style="clear: both">6</div>-->
</div>
</body>
</html>

运行结果：

image.png

分析：缺点从结果里面可以看得清清楚楚：就是不灵活。

4.3父级添加overflow属性

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box-wrapper {
            border: 5px solid red;
            overflow: hidden;
        }
        .box1 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="box-wrapper">
    <!--<div class="box3">1</div>-->
    <div class="box1">2</div>
    <div class="box1">3</div>
    <!--<div class="box2" style="clear: both">4</div>-->
    <!--<div class="box3">5</div>-->
    <!--<div class="box3" style="clear: both">6</div>-->
</div>
</body>
</html>

运行结果：

image.png

overflow属性详解

image.png

上面的示例就是设置的hidden，所以没有浮动元素里面的数字的下半部分被修剪了。当把overflow的值设置为scroll的时候，结果如下：

image.png

当把overflow的值设为auto的时候，结果如下：

image.png

两者对比可以发现，当为scroll的时候，右侧出现了滚动条，虽然下方没有出现，但是如果说你长度也超出了，是会出现滚动条的；但是值为auto的时候，下方没有滚动条。
同时，要特别注意，这种方法在下拉列表框的情况下不能使用。原因是overflow本来就是为了解决高度溢出的问题的，而你下拉列表出来的时候肯定是比你自身高度高的，会把下拉列表隐藏掉。

4.4父级加伪类after

示例代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .father {
            border: 5px solid red;
        }
        .father:after {
            content: "";
            display: block;
            clear: both;
        }
        .box1 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box2 {
            float: right;
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
        .box3 {
            width: 50px;
            height: 50px;
            margin: 20px;
            background-color: green;
            font-size: 80px;
        }
    </style>
    <link rel="stylesheet" href="Style.css"/>
</head>
<body>
<div class="father">
    <!--<div class="box3">1</div>-->
    <div class="box1">2</div>
    <div class="box1">3</div>
    <!--<div style="clear: both"></div>-->
    <!--<div class="box2" style="clear: both">4</div>-->
    <!--<div class="box3">5</div>-->
    <!--<div class="box3" style="clear: both">6</div>-->
</div>
</body>
</html>

运行结果：

image.png

分析：这个方式其实跟第一个方式有点像，但是这个操作方式是一个类选择器，比第一个好使，所以推荐用这个去做。

4.5防止父级边框塌陷方法总结

image.png

最后编辑于：2018.06.17 09:43:26

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,029评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,238评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,576评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,214评论 1赞 287
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,324评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,392评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,416评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,196评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,631评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,919评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,090评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,767评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,410评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,090评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,328评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,952评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,979评论 2赞 351

五、深入理解清除浮动

一、浮动的本质

二、浮动的特征

2.1浮动会脱离文档

2.2浮动可以内联排列

2.3浮动会导致父元素坍塌

三、深入理解clear属性

3.1在浮动元素上加上清除浮动的属性

3.2综合示例

四、解决父级边框塌陷的方法

4.1在标准文档流中的剩余元素上清除浮动实现撑开高度

4.2设置父元素的高度

4.3父级添加overflow属性

overflow属性详解

4.4父级加伪类after

4.5防止父级边框塌陷方法总结

推荐阅读更多精彩内容