網(wǎng)頁布局,實現(xiàn)水平方向的布局,就會用到浮動,今天用一篇文章總結(jié)下如何解決元素浮動對原布局所帶來的影響:
BFC:
BFC是塊級格式化上下文夺刑，是一種顯示渲染規(guī)則鬓催。
介紹：
只有同屬一個BFC時且兩個元素之間沒有阻擋時才會發(fā)生margin合并扣唱。阻止元素被浮動元素所覆蓋茄厘∫涎簦可以將浮動元素包含。
如何生成BFC：
- 設置float為left或者right宝穗。
- 設置overflow為hidden户秤、auto、scroll三者中的一種逮矛。
- 設置display為inline-block鸡号、table-caption、table-cell三者中的一種须鼎。
- 設置position為absolute或者fiexd鲸伴。
BFC作用：
清除浮動府蔗，為父元素創(chuàng)建BFC，可以讓父元素包含子浮動元素
解決外邊距合并問題
消除文字圍繞float元素的效果汞窗。
浮動元素:
特征：脫離文檔正常流姓赤，根據(jù)設置的浮動方式向左或向右浮動，直到遇到所處容器的的邊框或其它浮動元素仲吏。
對父容器的影響：會使父容器高度塌陷不铆；
對其它浮動元素的影響：會阻止其它浮動元素繼續(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，并且設置這個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;
}
