float 布局高度坍塌问题（08.13）

1. 父容器高度坍塌问题

导致的原因

浮动元素脱离文档流，使包含它的无高度样式的父容器感知不到其存在而发生内容无法撑开高度的现象

代码

<div class='ct'>
    <div class='a'></div>
    <div class='b'></div>
</div>

.ct{ width:300px; border: 10px solid; }
.a{ float:left; width:100px; height:100px; background:red; }
.b{ float:left; width:100px; height:100px; background:blue; }

图片说明

2. 解决方案

2.1 给父容器设置高度样式

缺点：只能适用于父容器高度固定的情况下，注定了这种方案很少用；

<div class='ct'>
    <div class='a'></div>
    <div class='b'></div>
</div>

.ct{ width:300px; border: 10px solid; height:100px; }    /*给父容器设置高度样式*/
.a{ float:left; width:100px; height:100px; background:red; }
.b{ float:left; width:100px; height:100px; background:blue; }

图片说明

2.2 父容器也设置浮动样式

因为浮动元素可以感知到浮动元素的存在，所以可以给父容器也设置浮动样式，使其感知到其内的浮动元素

缺点：给父容器设置了浮动样式后，父容器的父容器也会产生高度坍塌问题；

<div class='ct'>
    <div class='a'></div>
    <div class='b'></div>
</div>

.ct{ width:300px; border: 10px solid; float:left }        /*父容器也设置浮动样式*/
.a{ float:left; width:100px; height:100px; background:red; }
.b{ float:left; width:100px; height:100px; background:blue; }

图片说明

2.3 对父容器设置overflow:hidden/auto，触发其BFC

缺点：设置 hidden 会导致超出部分直接被隐藏，且不占据文档流位置，而设置 auto 的话超出部分会生成一个滚动条，影响视觉效果。

<div class='ct'>
    <div class='a'></div>
    <div class='b'></div>
</div>

/*对父容器设置overflow:hidden/auto，触发其BFC*/
.ct{ width:300px; border: 10px solid; overflow: hidden }        
.a{ float:left; width:100px; height:100px; background:red; }
.b{ float:left; width:100px; height:100px; background:blue; }

图片说明

2.4 使用伪元素，再用伪元素清除浮动

缺点：CSS代码量增多

<div class='ct'>
    <div class='a'></div>
    <div class='b'></div>
</div>

.ct{ width:300px; border: 10px solid; }
.ct:after{ content:''; display:block; clear: both; }/*使用伪元素，再用伪元素清除浮动*/
.a{ float:left; width:100px; height:100px; background:red; }
.b{ float:left; width:100px; height:100px; background:blue; }

图片说明

注：此法要注意的是，必须是 after 伪元素，且该伪类元素必须为 block 元素，原因是 after 伪元素在其父容器的其他标签的最后添加一个元素，渲染顺序排在了其父容器内部的最后，然后设置 block 元素是为了不让其它元素与其一排，再对其设置清除浮动，父容器自然就被这个 after 伪元素撑开了高度。

2.5 使用块级标签撑开高度

缺点：增加了无意义的标签

<div class='ct'>
    <div class='a'></div>
    <div class='b'></div>
    <p class='clear'></p>
</div>

.ct{ width:300px; border: 10px solid; }
.clear{ clear:both; }
.a{ float:left; width:100px; height:100px; background:red; }
.b{ float:left; width:100px; height:100px; background:blue; }

图片说明