*清浮动——2018-01-25
2018-01-25 本文已影响0人
不2青年
一、问题：
当给子元素加浮动的时候，因为其脱离文档流，导致父元素无法包住子元素。
代码：
<style>
/* 父元素 */
#box{
width: 200px;
margin: auto;
border: 5px solid black;
}
/* 子元素 */
#box1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
QQ截图20180125164719.png
二、解决方法
1、给父元素指定高度。
弊端：扩展性太差
2、给父级元素加浮动（使得两个元素在同一层级上）
弊端：
1、margin失效
2、需要给每个父级都要加浮动，导致整个页面都要浮动，不可行。
3、给父级元素加 display: inline-block;
原理：display: inline-block;与float相近，只不过不需要脱离文档流，如果该父级元素还有父级，也不需要再添加display: inline-block;父级自然会撑起高度。
弊端：margin失效，可以认为是方法2的改进版。
3、空标签清浮动
原理：因为子元素脱离文档流，父元素的高度无人撑起，所以加一个空的div，撑起高度（使用clear：both；使得该div不与浮动元素在同一行，父级的高度自然就被该div拉开了）。
<div id="clear"></div>
#clear{
height: 0px;
clear: both;
}
弊端：IE6下存在一个最小高度问题，所有高度小于19px的元素高度都被当做19px来处理。
解决方法：
在clear的样式里面再加上font-size:0;但是用这个方法只能处理2px以上的高度，2px一下就无能为力了。
4、在浮动元素下加<br clear="all"/>
原理与方法3相同，不过就是把一个空的div换成了一个折行符。
弊端：不符合W3C的标准——结构层、样式层、行为层，相分离。
5、利用after伪类(标准方法)
具体方法：给浮动元素的父级加{zoom:1;} :after{content:"";display:block;clear:both}
<style>
#box1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}/* 浮动元素 */
.clear{
zoom: 1;
}
.clear:after{
content: "";
display: block;
clear: both;
}
<style/>
...
<body>
<div id="box" class="clear">
<div id="box1"></div>
</div>
</body>
6、overflow溢出处理
具体方法：给父级元素加overflow，同时zoom：1；
#box{
width: 200px;
margin: auto;
border: 5px solid black;
/*清浮动方法*/
overflow: auto;
zoom: 1;
}
弊端：如果页面中有下拉列表，下拉列表会受到影响。
总结：
其他方法了解即可，第五种方法需要掌握。
