什么是浮动？
原理： 在css中使用float:left和float:right,使元素脱离文档流。同时显示为类似display:inline-block的形式（可以定义宽高，但是又不会换行）。最大的好处就是相比与之前的table布局，更具有灵活性。
不清除浮动会产生什么后果？
后果：父元素高度塌陷（子元素浮动之后，没有元素去撑开父元素）
清除浮动的方法有哪些？
- 父级元素定高度
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
.div1{
background:#000080;
border:1px solid red;
height:40px;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:40px;
background:#DDD
}
.right{
float:left;
width:30%;
display:inline;
margin-left:12px;
height:40px;
background:#DDD
}
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一致时，会产生问题。
建议： 定高布局时可以考虑
2.添加额外的标签
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>
.div1{
background:#000080;
border:1px solid red;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;margin-top:10px}
.left{
float:left;
width:20%;
height:40px;
background:#DDD
}
.right{
float:left;
width:30%;
margin-left:12px;
display:inline;
height:40px;
background:#DDD
}
.clearfloat{
clear:both
}
原理：在父元素底部添加一个空的div子元素，利用css提供的clear:both清除浮动，让父级div能自动获取到高度。
优点：简单、代码少，浏览器支持好，不容易出现怪问题。
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空的div，代码语义化变差。
建议： 不推荐使用，但此方法是以前主要使用的一种清除浮动的方法
3.父元素设置overflow：hidden（触发BFC）
通过设置父元素overflow：hidden；在IE6中还需要触发hasLayout，例如：zoom：1；
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
.div1{
background:#000080;
border:1px solid red;
overflow:hidden;
zoom:1
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:40px;
background:#DDD
}
.right{
float:left;
width:30%;
margin-left:12px;
display:inline;
height:40px;
background:#DDD
}
优点：不存在结构和语义化问题，代码量极少。
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的内容。
-
父元素设置overflow: auto;
代码如上
优点：不存在结构和语义化问题，代码量少。
缺点：多个嵌套后，Firefox某些情况会造成内容全选；IE中mouseover造成宽度改变时会出现最外层模块有滚动条，Firefox早期版本会无骨产生focus等。 -
父元素也浮动
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
.div1{
background:#000080;
border:1px solid red;
width:100%;
float:left
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:40px;
background:#DDD
}
.right{
float:left;
width:30%;
margin-left:12px;
display:inline;
height:40px;
background:#DDD
}
优点不存在结构和语义化问题，代码量极少。
缺点：父元素还有父元素，不可能一直浮动到body，不推荐使用。
6.父元素设置display： table
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
.div1{
background:#000080;
border:1px solid red;
width:100%;
display:table;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:40px;
background:#DDD
}
.right{
float:left;
width:30%;
margin-left:12px;
display:inline;
height:40px;
background:#DDD
}
原理：将div属性变成表格。
优点：结构语义化完全正确，代码量极少
缺点：盒模型属性已经改变，由此造成的一系列问题，不推荐使用。
建议：了解即可。
- 使用：after伪元素
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
.div1{
background:#000080;
border:1px solid red;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.right{
float:left;
width:30%;
margin-left:12px;
display:inline;
height:80px;
background:#DDD
}
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{
zoom:1
}
优点： 结构和语义化完全正确。
缺点：复用方式不当会造成代码量增加。
网友评论