一、float：主要目的是為了實現(xiàn)文本繞排圖片的效果。
也成了創(chuàng)建多欄布局最簡單的方式。
<img src= “ ” /> <p>文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p>
【1】文本繞排圖片
P {margin: 0; border: solid 1px;}
img {float: left;}
【2】創(chuàng)建多欄布局
P {margin: 0; border: solid 1px; width: 200px; float: left;}
img {float: left;}
二、浮動元素脫離了文檔流，其父元素也看不到他了，因為也不會包圍他，就會出現(xiàn)子元素有高度，而父元素不會被撐起，這時候并非我們想要，
下面有三種方法解決，請審時度勢合理應用：
<section> <img src=" /> <p>這是段落這是段落這是段落這是段落這是段落這是段落這是段落</p> </section> <footer>這是底部這是底部這是底部這是底部這是底部這是底部這是底部</footer>
section , footer {border: solid 1px;}
img {float: left;}
【1】為父元素添加 overflow： hidden；強制父元素包圍浮動元素
這樣聲明的真正用途是 防止父元素被超大內(nèi)容撐開，應用overflow： hidden之后，父元素依然保持其設定的寬度，超大的子內(nèi)容會被容器剪切掉
除此之外，overflow： hidden還有另外一個作用，即它能可靠地迫使父元素包含其浮動子元素。
不能在使用下拉菜單的頂級元素上使用，否則作為其子元素的下拉菜單就不會顯示了。
【2】同時浮動父元素, 寬度100%與瀏覽器寬度同寬， 給footer設置清除浮動，使footer不會擠到section旁邊去
section {border: solid 1px; float: left; width:100%}
footer {border: solid 1px; clear: left}
img {float: left;}
不能在靠外邊距自動居中的元素使用。否則不再居中。
【3】添加非浮動的清除元素（偽元素）
.clearfix: after {
content: "";
display: block ;
height: 0
visibility: hidden;
clear : both
}
三、沒有父元素時，如何清除(img p 作為一組 ，沒有父元素)
<section> <img src=" /> <p class="clearfix">文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p> <img src=" /> <p class="clearfix">文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p> <img src=" /> <p class="clearfix">文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容文本內(nèi)容段落內(nèi)容</p> </section>
.clearfix: after {
content: "";
display: block ;
height: 0
visibility: hidden;
clear : both
}
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持！
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學習交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。