課程
/前端開發
/HTML/CSS
/從 psd 到 html
clearfloat和float的區別是什么,什么時候用clearfloat什么時候用float
2016-06-18
源自:從 psd 到 html 3-1
正在回答
。。。。視頻里的clearfloat 明明是老師在reset.css里的一個類
.clearfloat{ zoom:1;/*適用ie6、7*/ } .clearfloat:after{ display:?block; clear:?both; content:?"?"; visibility:?hidden; height:?0;/*其他適用*/ }
clearfloat這個類的作用是清除浮動影響。
claerfloat用于[浮動子元素]的【父級元素】
例如:視頻中public-container有兩個子元素header-logo和header-nav
.public-container?.header-nav{ float:?right;/*header-nav右浮動,即[浮動子元素]*/ font-size:?14px; } .public-container?.header-logo{ float:?left;/*header-logo左浮動,即[浮動子元素]*/ margin-top:?40px; }
故,需要給public-container 這個父元素對應加上clearfloat屬性,即:
<div?class="public-container?clearfloat"><!--public-container加上clearfloat?用空格間隔不同class--> ????<div?class="header-logo"><a?href=""></a></div> ????<ul?class="header-nav?clearfloat"> <li?class="item"><a?href="">Our?Story</a></li> <li?class="item"><a?href="">Menu</a></li> <li?class="item"><a?href="">Reservation</a></li> <li?class="item"><a?href="">News</a></li> <li?class="item"><a?href="">Rviews</a></li> ????</ul> </div>
綜上,要浮動的元素用float,浮動元素的父元素用clearfloat ?
float更多參考請見:CSS float 屬性
clearfloat更多參考請見:CSS深入理解之float浮動---4.1清除浮動
clearfloat即是視頻中的.clearfix
望采納or覺得好就點個贊唄
float是浮動也就是脫離普通的文檔流,當浮動元素脫離文檔流就是造成他的父級的高度塌陷,或者是其他塊找不到,而clearfloat是清除浮動,他會清除浮動所造成的影響,當你的元素需要水平擺放時,你可以使用浮動,還可以使用display:inline-block...
案例:
float:left; 當前元素向左側浮動.float:right: 當前元素向右側浮動.
clear:left; 禁止左側出現浮動元素,如果左側存在浮動元素,則當前元素將在浮動元素下面另起一行呈現.clear:right; 禁止右側出現浮動元素,如果右側存在浮動元素,則右側的浮動元素將在當前元素下面另起一行呈現.clear:both; 禁止左右兩側出現浮動元素,當前元素將排斥浮動元素獨占一行呈現.
舉報
教你把PSD設計稿轉化成HTML,用案例來講解基本流程
2 回答clearfloat 有什么作用?加不加感覺不到區別
1 回答用position:absolute跟用float有什么區別嗎
2 回答clearfloat有什么作用用,感覺沒什么用???
1 回答為什么class里面要寫clearfloat?
3 回答能詳細講解一下為什么要用clearFloat么?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-07-05
。。。。視頻里的clearfloat 明明是老師在reset.css里的一個類
clearfloat這個類的作用是清除浮動影響。
claerfloat用于[浮動子元素]的【父級元素】
例如:視頻中public-container有兩個子元素header-logo和header-nav
故,需要給public-container 這個父元素對應加上clearfloat屬性,即:
綜上,要浮動的元素用float,浮動元素的父元素用clearfloat ?
float更多參考請見:CSS float 屬性
clearfloat更多參考請見:CSS深入理解之float浮動---4.1清除浮動
clearfloat即是視頻中的.clearfix
望采納or覺得好就點個贊唄
2016-06-19
float是浮動也就是脫離普通的文檔流,當浮動元素脫離文檔流就是造成他的父級的高度塌陷,或者是其他塊找不到,而clearfloat是清除浮動,他會清除浮動所造成的影響,當你的元素需要水平擺放時,你可以使用浮動,還可以使用display:inline-block...
案例:
2016-06-19
float:left; 當前元素向左側浮動.
float:right: 當前元素向右側浮動.
clear:left; 禁止左側出現浮動元素,如果左側存在浮動元素,則當前元素將在浮動元素下面另起一行呈現.
clear:right; 禁止右側出現浮動元素,如果右側存在浮動元素,則右側的浮動元素將在當前元素下面另起一行呈現.
clear:both; 禁止左右兩側出現浮動元素,當前元素將排斥浮動元素獨占一行呈現.