網(wǎng)頁布局,實現(xiàn)水平方向的布局,就會用到浮動,今天用一篇文章總結(jié)下如何解決元素浮動對原布局所帶來的影響:
BFC:
BFC是塊級格式化上下文，是一種顯示渲染規(guī)則。
介紹：
只有同屬一個BFC時且兩個元素之間沒有阻擋時才會發(fā)生margin合并。阻止元素被浮動元素所覆蓋?？梢詫⒏釉匕?。
如何生成BFC：
- 設(shè)置float為left或者right。
- 設(shè)置overflow為hidden、auto、scroll三者中的一種。
- 設(shè)置display為inline-block、table-caption、table-cell三者中的一種。
- 設(shè)置position為absolute或者fiexd。
BFC作用：
清除浮動，為父元素創(chuàng)建BFC，可以讓父元素包含子浮動元素
解決外邊距合并問題
消除文字圍繞float元素的效果。
浮動元素:
特征：脫離文檔正常流，根據(jù)設(shè)置的浮動方式向左或向右浮動，直到遇到所處容器的的邊框或其它浮動元素。
對父容器的影響：會使父容器高度塌陷；
對其它浮動元素的影響：會阻止其它浮動元素繼續(xù)移動；
對普通元素的影響：普通元素就像感知不到浮動元素的存在，浮動元素會覆蓋住普通元素；
對文字的影響：文字能夠感知到浮動元素，會環(huán)繞浮動元素按順序顯示；
例子:
<head>
<style>
.ct{border:1px solid pink;}
.ct1{float:left;width:100px;background:red;}
.ct2{float:left;width:100px;background:green;}
</style>
</head>
<body>
<div class="ct clear">
<div class="ct1"></div>
<div class="ct2"></div>
</div>
</body>
解決辦法:
- 增加空div。
在浮動原色最下方加入一個空的div，并且設(shè)置這個div為clear：both；
缺點：增加一個無用的div。
- 使用CSS屬性為父元素創(chuàng)建一個BFC，利用BFC可以包含浮動元素的特性清除浮動元素。
缺點：float可能會影響布局，position:absolute;可能得到的結(jié)果并不是自己想要的。
- 利用偽類：after清除。(推薦使用)
.clearfix{
zoom:1; /IE6、7*/
}
.clear{
content:" ";
display:block;
clear:both;
}
