本文通過圖文并茂的形式給大家介紹了CSS浮動與清除浮動的實例代碼，非常不錯，具有一定的參考借鑒價值，,需要的朋友可以參考下

一、float(浮動)是什么

float 屬性定義元素在哪個方向浮動。

float:left 元素向左浮動。

float:right 元素向右浮動。

float:none 默認值。元素不浮動，并會顯示在其在文本中出現的位置。

float:inherit 規(guī)定應該從父元素繼承 float 屬性的值。

看一段簡單的代碼：

左浮動右浮動喵

.child1 {

float: left;

height: 500px;

width: 70%;

background: #aa0;//黃

}

.child2 {

float: right;

height: 300px;

width: 30%;

background: #0aa;//青

}

.child3 {

background: #a0a;//紫

}

二、clear是什么

clear 屬性指定段落的左側或右側不允許浮動的元素。

clear:left 在左側不允許浮動元素。

clear:right 在右側不允許浮動元素。

clear:both 在左右兩側均不允許浮動元素。

clear:none 默認值。允許浮動元素出現在兩側。

clear:inherit 規(guī)定應該從父元素繼承 clear 屬性的值。

比如上面的例子，我們?yōu)?child3 加上 clear: both; ，便可清除浮動。(child3的左右兩側都不允許浮動元素，自然而然不會再跟在倆浮動元素的屁股后面了~)

那么，只在一側不允許浮動是怎樣的呢？

本來是醬紫的：那么，只在一側不允許浮動是怎樣的呢？

本來是醬紫的：

child1右浮動child2右浮動

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

.child1 {

float: right;

background: #aa0;//黃

}

.child2 {

float: right;

background: #0aa;//青

}

然后，為 child2 加上 clear: right; ，在child2的右側不允許浮動元素，所以child2就飄到了下一行。

那么，為 child1 加上 clear: left; 的時候，為什么不起效果呢？在這留個小彩蛋，歡迎大家留言討論~

三、浮動帶來的影響

浮動帶來的最大影響就是，當父元素只包含浮動的子元素的時候，父元素的高度就會塌陷( height 變?yōu)?0 )。像醬紫：(parent高度為0，無法顯示粉色背景)

child1右浮動child2右浮動

.parent {

background: #FBC;//粉

}

四、清除浮動的方式

1. 在父元素中的結尾加一個空 div

div

child1右浮動child2右浮動

.child1 {

float: right;

background: #aa0;

}

.child2 {

float: right;

background: #0aa;

}

可見，空 div 高度為0，位于父盒子的最下面，使父盒子重新?lián)纹鹆藨械母叨取?/p>

為什么要在最后加？倘若你在中間加，效果會是醬紫：

由于空 div 的左右都不允許浮動元素，那么它就會另起一段，導致盒子位置的效果就像 child2 清除右側浮動一樣， child2 跑到了 child1 下方。

2. 在父元素設置 overflow 屬性

? 原理：設置 overflow:hidden 或 overflow:auto ，瀏覽器會自動檢查浮動區(qū)域高度(才能知道父框的內容有無溢出)

? 優(yōu)點：瀏覽器支持好

? 缺點：子元素若超出父元素尺寸會被隱藏，或者父元素出現滾動條

child1右浮動child2右浮動

當設置 overflow:auto; 時，父元素會出現滾動條：

3.偽元素

? 原理：類似設置clear屬性

? 優(yōu)點：瀏覽器支持好，普遍

child1右浮動child2右浮動

.clearfix{

zoom: 1; //zoom(IE專有屬性)可解決ie6，ie7浮動問題

display: block;

}

.clearfix:after {

content: "."; //content: "";也可

visibility: hidden;

display: block;

height: 0;

clear: both;

}

更多CSS問題的相關技術文章，請訪問CSS問題教程欄目進行學習！

總結

以上是生活随笔為你收集整理的html 清除浮动怎么写,清除浮动的css写法有哪些的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。