浮动
盒子浮起来，不会占据原来的位置，若父盒子没有高度，则不会撑开父盒子，父盒 子高度为0。
浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要给父盒子清除浮动，否则父盒子不会被撑开。
清除浮动的目的
为了解决父级元素因为子级浮动引起的内部高度为0的问题。
方法
一.额外标签法
在最后一个浮动标签后，新加一个标签，给其设置clear：both；
.father{width: 200px;border: 1px solid red;}
.small{width: 100px;height: 100px;float: left;background-color: cornflowerblue;}
.big{width: 50px;height: 20px;float:left;background-color: chartreuse;}
.clear{clear: both;}
<div class="father">
<div class="small"></div>
<div class="big"></div>
<div class="clear"></div>
</div>
优点：通俗易懂，书写方便。（不推荐使用）
缺点：添加许多无意义的标签，结构化比较差。
给定标签清除浮动.png
二.父级添加overflow属性
可以通过触发BFC的方式，实现清楚浮动效果。父级添加overflow：hidden；
.father{width: 200px;border: 1px solid red;overflow: hidden;}
.small{width: 100px;height: 100px;float: left;background-color: cornflowerblue;}
.big{width: 50px;height: 20px;float:left;background-color: chartreuse;}
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。
三.使用伪元素清除浮动（推荐）
.father::after{content: "";display: block;height: 0;clear:both;visibility: hidden;zoom: 1;}
.small{width: 100px;height: 100px;float: left;background-color: cornflowerblue;}
.big{width: 50px;height: 20px;float:left;background-color: chartreuse;}
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
四.使用双伪元素清除浮动
.father::after,.father::before{content: " ";display: block;}
.father::after{clear: both;}
.father{*zoom: 1;}
.small{width: 100px;height: 100px;float: left;background-color: cornflowerblue;}
.big{width: 50px;height: 20px;float:left;background-color: chartreuse;}
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
注意什么是haslayout
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）
网友评论