CSS3 清除浮動的方法示例
我要評論一、 目的
通過本文，讓大家可以明白清除浮動的原理和幾種方法，最后得出一種本文認(rèn)為最好用的方法。
二、 內(nèi)容簡介
1、 引入，還原浮動本來的意義
2、 說明，實際開發(fā)中常用浮動來做什么
3、 提問，為什么要清除浮動
4、 回答，如何清除浮動以及常用的幾種方法
5、 結(jié)論，得出本文認(rèn)為最好用的方法
三、 正文
1、 浮動本來的意義
浮動的意義原本僅是用來讓文字環(huán)繞在圖片周圍而已。
通過上圖可以看到，設(shè)置圖片左浮動可以將圖片從正常文檔流中抽取出來，后面的元素會忽略浮動元素原來的位置，所以可以看到以塊元素顯示的span標(biāo)簽插入到了圖片下面，但是，我們發(fā)現(xiàn)文字卻不會嵌入到圖片下面，因為這就是浮動最純粹的意義--讓文字環(huán)繞在圖片周圍（關(guān)于為什么文字不會插入浮動元素下面在網(wǎng)上也有一些討論，大家可以去搜索一下，本文在此就不做更詳細(xì)的解釋了）。
PS: 如果想讓文字也插入到浮動元素下面，可以通過設(shè)置絕對定位來實現(xiàn)。
// html代碼
<section>
<div class="origin1">
<span>想象我是一大段文字</span>
</div>
<div class="float1">
<span>想象我是一大段文字</span>
</div>
</section>
// css代碼
.origin1 span {
display: block;
width: 250px;
height: 120px;
background-color: #78f182;
}
.float1 img{
float: left;
}
.float1 span {
display: block;
width: 250px;
height: 120px;
background-color: #78f182;
}
2、 浮動經(jīng)常被用來做什么
因為浮動可以讓塊狀元素并排顯示，所以經(jīng)常用來做導(dǎo)航欄，內(nèi)容分塊欄等布局。
// html代碼
<section class="section2">
<ul>
<li><a href="#">產(chǎn)品中心</a></li>
<li><a href="#">服務(wù)中心</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">客戶見證</a></li>
<li><a href="#">招賢納士</a></li>
</ul>
</section>
// css代碼
.section2 li{
list-style: none;
float: left;
padding: 20px;
height: 20px;
background-color: #1249c3;
border-right: 1px solid #a0a2a2;
}
.section2 li a {
color: #fff;
}
3、 為什么要清除浮動
通過上圖可以看到，當(dāng)三個板塊左浮動以后，因為它們脫離了正常文檔流，所以它們的父元素ul在不設(shè)置高度的情況下，無法被子元素?fù)伍_(能夠看到背景色是因為我設(shè)置了ul的padding為10px)，所以當(dāng)你在后邊新增元素的時候，自然會排在ul后邊，也就是插入到了3個浮動的板塊下面。
這并不是我們想要的，這就是要清除浮動的原因。
// html代碼
<ul>
<li><p>互動板塊 li</p></li>
<li><p>學(xué)習(xí)板塊 li</p></li>
<li><p>留言板塊 li</p></li>
我是本應(yīng)該包裹在3個板塊外面的父元素ul
</ul>
<div class="new">我是跟在ul后面的新div</div>
// css代碼
ul {
padding: 20px;
background-color: #b7db05;
}
ul li {
width: 200px;
height: 200px;
background-color: #e3e3e3;
margin-right: 20px;
text-align: center;
float: left;
}
.new {
height: 50px;
background-color: #1be751;
}
4、 如何清除浮動
(1) 在最后一個浮動的 li 元素后邊新增一個空的塊狀元素div，并設(shè)置clear:both以清除所有浮動。
// html代碼
<ul>
<li><p>互動板塊 li</p></li>
<li><p>學(xué)習(xí)板塊 li</p></li>
<li><p>留言板塊 li</p></li>
我是本應(yīng)該包裹在3個板塊外面的父元素ul
<div style="clear:both;"></div> // 新增代碼
</ul>
<div class="new">我是跟在ul后面的新div</div>
效果： ul后邊的div元素確實可以在浮動元素下邊排列，并且設(shè)置margin、padding等也是針對浮動元素的下邊框。
缺點： 多出了一個冗余標(biāo)簽，并沒有任何結(jié)構(gòu)意義。
(2) 設(shè)置父元素ul的overflow: hidden或者overflow: auto。
// css代碼
ul {
padding: 20px;
background-color: #e7a5b8;
overflow: hidden;
}
效果： 對于ul后面的元素來說，它們可以在浮動元素下邊依次排列了。
缺點： 采用這種overflow方法時可能會對采用定位position的元素產(chǎn)生影響，因為在ul的范圍內(nèi)，超出的部分將會被隱藏，所以如果定位元素處在ul超出的范圍內(nèi)，那么會被隱藏。
(3) 采用偽類方法，在最后一個浮動元素的后邊，添加clear:both。
// css代碼
ul:after {
content: "";
clear: both;
display: block;
}
效果： 很好的清除了浮動帶來的影響，并且沒有附加作用，也沒有新增無語義的標(biāo)簽。
缺點： 暫時還沒發(fā)現(xiàn)。
四、 結(jié)論
綜上所述，本文認(rèn)為最好用的方法是采用after偽類來清除浮動帶來的影響，歡迎大家前來討論。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
浮動指的是一個元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動 float屬性的相關(guān)知識，感興趣的朋友一起看看吧2020-02-24
這篇文章主要介紹了CSS實現(xiàn)元素浮動和清除浮動的方法,簡單介紹了浮動的基本知識，通過截圖代碼的形式給大家介紹了css清除浮動的方法，需要的朋友可以參考下2019-12-05
純CSS3+SVG實現(xiàn)的機(jī)器人懸浮動畫效果源碼
這是一款基于純CSS3+SVG實現(xiàn)的機(jī)器人懸浮動畫效果源碼。畫面中的機(jī)器人懸浮在空中并上下漂浮，隨著上下的漂浮動作還伴隨著機(jī)器人擺動著手臂、眨眼等動作，機(jī)器人下方的陰影2019-09-30
這篇文章主要介紹了html/css中float浮動的用法實例詳解,需要的朋友可以參考下2019-09-10
這篇文章主要介紹了Css實現(xiàn)清除浮動的方法匯總,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-11- 塊級格式化上下文，是一個獨立的渲染區(qū)域，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離，使內(nèi)外元素的定位不會相互影響。這篇文章給大家介紹了CSS 使用偽元素清除浮動的方2019-07-01
CSS使用placeholder-shown偽類實現(xiàn)輸入框浮動文字效果
這篇文章主要介紹了CSS使用placeholder-shown偽類實現(xiàn)輸入框浮動文字效果,需要的朋友可以參考下2019-06-12- 這篇文章主要介紹了CSS 清除浮動、BFC的相關(guān)資料,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-23
