清除浮動的三種方法

2021-08-19 14:02:56 字數 1027 閱讀 8373

lang="en">

charset="utf-8">

清除浮動的三種方法title>

type="text/css">

.div3

.div3

:after

style>

head>

style="background: blue;border: 1px solid gold;">

使用空標籤清除浮動。增加了無意義的結構元素

style="float: left; background:#cccccc; line-height:100px;">leftdiv>

style="float: right; background:#cccccc; line-height:200px;">rightdiv>

style="clear: both;">

div>

div>

style="background: blue;border: 1px solid gold; overflow: hidden; zoom:1;">

使用overflow屬性。使用overflow的時候,可能會對頁面表現帶來影響。

style="float: left; background:#cccccc; line-height:100px;">leftdiv>

style="float: right; background:#cccccc; line-height:200px;">rightdiv>

div>

class="div3">

使用after偽物件清除浮動。該方法只適用於非ie瀏覽器。

style="float: left; background:#cccccc; line-height:100px;">leftdiv>

style="float: right; background:#cccccc; line-height:200px;">rightdiv>

div>

body>

html>

清除浮動的三種方法

在我使用浮動時,為我們帶來了便利的同時也帶了一點影響,我們在使用浮動時往往不會給父級盒子新增高度,因為子盒子會撐起父盒子。這樣一旦我們使用浮動,則下面使用的div會跑到父級盒子的位置,畢竟使用浮動,不占有位置,解決此問題我列出了三種方法,希望能幫助大家。1 在浮動元素後新增空標籤 eg 111222...

清除浮動的三種方法

浮動布局,float left 會使當前元素脫離文件流,從而失去對父級元素的支撐,如果此時父級元素沒有設定高度,下面的元素就會擠上去,因此需要清除浮動 給浮動元素的父級元素設定overflow hidden 在浮動元素的同級下新增乙個空標籤,並且設定clear both 浮動元素的父級元素使用 af...

速記 清除浮動的三種方法

在今天的布局訓練中學到了運用float來使標籤浮動,這樣便於排版,但在使用float的過程中,有的塊在浮動後塊內的塊標籤是不需要浮動的,這時就需要清楚浮動效果。清楚浮動效果有三種方式 1 cleer 2 cleer3 fd fd after以上三種方法在一般瀏覽器上實現完全沒問題,但在ie6上就可能...