亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

clearfloat和float的區別是什么,什么時候用clearfloat什么時候用float

clearfloat和float的區別是什么,什么時候用clearfloat什么時候用float

正在回答

3 回答

。。。。視頻里的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覺得好就點個贊唄

2 回復 有任何疑惑可以回復我~

float是浮動也就是脫離普通的文檔流,當浮動元素脫離文檔流就是造成他的父級的高度塌陷,或者是其他塊找不到,而clearfloat是清除浮動,他會清除浮動所造成的影響,當你的元素需要水平擺放時,你可以使用浮動,還可以使用display:inline-block...

案例:

5766315d0001ea8405000259.jpg

5766315e0001654605000259.jpg

5766315f0001e6db05000259.jpg

5766315f0001db3104890449.jpg


0 回復 有任何疑惑可以回復我~

float:left; 當前元素向左側浮動.
float:right: 當前元素向右側浮動.

clear:left; 禁止左側出現浮動元素,如果左側存在浮動元素,則當前元素將在浮動元素下面另起一行呈現.
clear:right; 禁止右側出現浮動元素,如果右側存在浮動元素,則右側的浮動元素將在當前元素下面另起一行呈現.
clear:both; 禁止左右兩側出現浮動元素,當前元素將排斥浮動元素獨占一行呈現.


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

clearfloat和float的區別是什么,什么時候用clearfloat什么時候用float

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號