淺談CSS中的clear清除浮動
發(fā)布時間：2016-06-06 08:52:00 作者：佚名 
我要評論
我要評論下面小編就為大家?guī)硪黄獪\談CSS中的clear清除浮動。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1、CSS中的clear有四個參數(shù)：
none：允許兩邊都可以浮動。
left：不允許左邊有浮動。
right：不允許右邊有浮動。
both(默認(rèn))；不允許有浮動。
2、一開始在CSS中clear浮動是默認(rèn)both，也就是說一開始不能有浮動的。
3、使用的案例：假設(shè)我清除第三個DIV的浮動
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <style type="text/css">
- div{
- border:1px solid red;
- float:left;
- clear:none;
- }
- #msg_Div{
- width:600px;
- height:600px;
- }
- .one{
- width:100px;
- height:90px;
- }
- .two{
- width:100px;
- height:90px;
- }
- .three{
- width:100px;
- height:90px;
- clear:left;
- }
- .four{
- width:100px;
- height:90px;
- }
- .five{
- width:100px;
- height:90px;
- }
- </style>
- <body>
- <div id="msg_Div">
- <div class="one"></div>
- <div class="two"></div>
- <div class="three"></div>
- <div class="four"></div>
- <div class="five"></div>
- </div>
- </body>
效果：
以上這篇淺談CSS中的clear清除浮動就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了清除css浮動的三種方法小結(jié),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-19詳解css清除浮動float的七種常用方法總結(jié)和兼容性處理
這篇文章主要介紹了詳解css清除浮動float的七種常用方法總結(jié)和兼容性處理,非常具有實(shí)用價值，需要的朋友可以參考下2017-09-11
這篇文章主要介紹了淺談css中浮動和清除浮動帶來的影響，通過代碼示例和圖片展示詳細(xì)介紹講解了浮動的應(yīng)用和實(shí)現(xiàn)效果,需要的朋友可以參考下2017-08-14- 本文主要介紹了CSS解決浮動，清除浮動的幾種方法：1、設(shè)置父元素高度；2、overflow；3、增加子元素（塊級），并且設(shè)置其clear屬性值為both來解決（隔墻法、內(nèi)墻法）；4、使2017-03-22
詳解CSS中zoom屬性或overflow:auto屬性清除浮動的作用
這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動的作用,文中通過實(shí)例代碼介紹的很詳細(xì)，相信會對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋2016-11-26- 在大家在使用css的過程中，多多少少會遇到清除浮動這個問題。所以這篇文章給大家總結(jié)了div+css中關(guān)于清除浮動塌陷的4種方法，相信會對大家學(xué)習(xí)或者使用div+css能有所幫助，2016-10-17
- 這篇文章主要介紹了CSS清除浮動的方法詳解,值得注意的是并不是每次單純把浮動清除掉就可以解決相關(guān)問題,文中最后談到的閉合浮動的方案也非常值得一試,需要的朋友可以參考下2016-05-30
CSS浮動所產(chǎn)生的內(nèi)容溢出問題及清除浮動的方法小結(jié)
CSS的float浮動效果在一些情況下非常不穩(wěn)定,控制不好的時候一般還是清除浮動為妙,這里我們就來看一下CSS浮動所差生的內(nèi)容溢出問題及清除浮動的方法小結(jié)2016-05-30- 下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動常用方法總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-06
這篇文章主要介紹了Css實(shí)現(xiàn)清除浮動的方法匯總,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-11
