CSS清除浮動float的三種方法小結(jié)

一、浮動的定義
使元素脫離文檔流,按照指定方向發(fā)生移動,遇到父級邊界或者相鄰的浮動元素停了下來。
ps:文檔流:文檔流是文檔中可顯示對象在排列時所占用的位置 。
語法
float常跟屬性值left、right、none
float:none 不使用浮動
float:left 靠左浮動
float:right 靠右浮動
二、浮動的用途
可設(shè)置文字環(huán)繞或使元素寬度由內(nèi)容填充(類似Inline-block)。使用浮動需要注意的是如果浮動的元素高度比父級容器還高,那么需要設(shè)置父級容器的overflow屬性為auto,使其自動撐滿。
三、浮動用法
分析HTML結(jié)構(gòu):
<div class="box"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
分析CSS代碼樣式:
.box { border: 1px solid #ccc; background: #fc9; color: #fff; margin: 50px auto; padding: 50px; } .div1 { width: 100px; height: 100px; background: darkblue; float: left; } .div2 { width: 100px; height: 100px; background: darkgoldenrod; float: left; } .div3 { width: 100px; height: 100px; background: darkgreen; float: left; }
清除浮動
方法一:添加新元素,應(yīng)用clear:both;
HTML:
<div class="box"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
CSS:
.clear { clear: both; height: 0; line-height: 0; font-size: 0 }
一切恢復(fù)作用啦。
方法二:父級div定義overflow:auto;
HTML:
<div class="box"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
CSS:
.box { border: 1px solid #ccc; background: #fc9; color: #fff; margin: 50px auto; padding: 50px; overflow: auto; zoom: 1; /*zoom: 1; 是在處理兼容性問題 */ }
結(jié)果:也是實(shí)現(xiàn)了。
方法三:在父級樣式添加偽元素:after或者:before(推薦)
HTML:
<div class="box"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
CSS:
.box { border: 1px solid #ccc; background: #fc9; color: #fff; margin: 50px auto; padding: 50px; } .box:after{ content: ''; display: block; clear: both; }
結(jié)果:當(dāng)然不用說啦
總結(jié)
以上所述是小編給大家介紹的CSS清除浮動float的三種方法小結(jié),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
詳解css清除浮動float的七種常用方法總結(jié)和兼容性處理
這篇文章主要介紹了詳解css清除浮動float的七種常用方法總結(jié)和兼容性處理,非常具有實(shí)用價值,需要的朋友可以參考下2017-09-11- 本文詳細(xì)介紹了CSS中position定位和float浮動的相關(guān)知識,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-24
CSS使用float屬性設(shè)置浮動元素的實(shí)例教程
這篇文章主要介紹了CSS使用float屬性設(shè)置浮動元素的實(shí)例教程,包括使用overflow清除浮動的方法,需要的朋友可以參考下2016-07-07- 本文針對CSS浮動float、定位position進(jìn)行學(xué)習(xí)理解,通過實(shí)例幫助大家掌握CSS浮動float、定位position技巧,感興趣的小伙伴們可以參考一下2016-04-21
- 這篇文章主要介紹了css浮動(float/clear)使用方法,如果你理解CSS盒子模型,但對于浮動不理解,那么這篇文章可以幫助你2014-03-14
css浮動(float,clear)通俗講解經(jīng)驗(yàn)分享
對于浮動始終非常迷惑,可能是自身理解能力差,也可能是沒能遇到一篇通俗的教程,前兩天終于搞懂了浮動的基本原理,迫不及待的分享給大家,感興趣的朋友可以參考下哈,希望2013-03-28- 這篇文章主要介紹了html/css中float浮動的用法實(shí)例詳解,需要的朋友可以參考下2019-09-10