css之float和clear

時間 2019-11-07

標籤 css float clear 欄目 CSS 简体版

原文原文鏈接

浮動元素

浮動元素位於「文檔流」外部，於是它不包含在標記中的父元素以內。那麼何時咱們須要用到浮動元素呢？舉個最簡單的例子，例若有些blog，有header，section, footer，其中section三欄佈局，左側是博文分類，中間是博文列表，右側是一些信息。首先咱們能夠寫出它的結構
css

<body>
    <header>頭部</header>
    <section>
	<aside>左側</aside>
	<iframe>內容</iframe>
	<aside>右側</aside>
    </section>
    <footer>底部</footer>
</body>

如今咱們看到的是常規文檔流，即塊級元素包圍着全部子元素，並且在頁面中自上而下相互堆疊在一塊兒。這時咱們爲了達到三欄佈局，最簡單的方式就是運用浮動。html

*{ margin:0; padding:0;}
header {background:rgb(204,255,204);}
section{background:yellow;}
aside{border:1px solid navy;width:100px;height:600px;background:pink;}
aside:nth-of-type(1) {float:left;}
aside:nth-of-type(2) {float:right;}iframe{background:blue;}
footer{background:red;}

上面的圖就是實現效果。從圖中能夠看出，aside與iframe卻是並列佈局，可是其父元素<section>也再也不包圍浮動元素，只包圍非浮動元素，因此footer給提上來了，這個確定不知足咱們的要求。爲了使得footer位於aside如下，咱們有三種解決方案：瀏覽器

第一種：爲父元素應用overflow:hidden，以強制它包圍浮動元素。在此例子中，把overflow:hidden應用到section中，會發現footer回到咱們指望的位置了。Tips:ide

overflow:hidden聲明的真正用途是防止包含元素被超大內容撐大。應用該聲明以後，包含元素仍然保持其設定的高度和寬度，而超大的子內容則會被容器剪切掉。除此以外，overflow:hidden還有另外一個做用，就是它能可靠地迫使父元素包含其浮動的子元素。佈局

第二種：同時浮動父元素。在section中添加float:left;width:100%;。其實現效果以下圖所示：spa

浮動父元素以後，無論其子元素是否浮動，它都會牢牢包裹住它的子元素。所以須要用width:100%再讓section與瀏覽器容器等寬。另外，因爲section如今也浮動了，因此footer會努力往上擠到它旁邊去。爲了強制footer依然呆在section下方，要給它應用clear:left。被清除的元素不會向上浮動，不讓它超過浮動元素的下方邊界。
code

第三種：添加非浮動的清除元素
htm

第三種強制父元素包含其浮動子元素的方法，就是給父元素的最後添加一個非浮動的子元素，而後清除該子元素。因爲包含元素必定會包圍非浮動的子元素，並且清除會讓這個子元素位於浮動元素的下方，所以包含元素必定會包含這個子元素-----以及前面的浮動元素。在包含元素最後添加子元素做爲清除元素的方式有兩種。第一種，純添加一個表現的div。如如下代碼：blog

<body>
		<header>頭部</header>
		<section>
			<aside>左側</aside>
			<iframe>內容</iframe>
			<aside>右側</aside>
			<div class="clear"></div>
		</section>
		<footer>底部</footer>
	</body>

在css中添加ip

div.clear{clear:right;}

因爲div沒有默認樣式，不會引入多餘空間，因此div很適合這個目的。第二種，若是不想加入表現性的div，則給section添加一個class。

<body>
		<header>頭部</header>
		<section class="clearfix">
			<aside>左側</aside>
			<iframe>內容</iframe>
			<aside>右側</aside>
		</section>
		<footer>底部</footer>
	</body>

header {background:rgb(204,255,204);}
section{background:yellow;}
aside{border:1px solid navy;width:100px;height:600px;background:pink;}
aside:nth-of-type(1) {float:left;}
aside:nth-of-type(2) {float:right;}
iframe{background:blue;}
footer{background:red;}
section.clearfix:after{content:'.';display:block;height:0;visibility:hidden;clear:both;}

這個規則它只添加了一個清除的包含句點做爲非浮動元素（必須得有內容，而句點是最小的內容）。規則中的其餘聲明是爲了確保這個僞元素沒有高度，並且在頁面上不可見。使用clear:both意味着section中新增的子元素會清除左右浮動元素（位於左、右浮動元素下方）。

ok，以上咱們介紹了強迫父元素包圍其浮動子元素的三種方式，分別是：給父元素添加overflow:hidden聲明、浮動父元素、在父元素內容的末尾添加非浮動元素，能夠直接在html中添加，也能夠經過給父元素添加類，而後利用clearfix規則。

固然，這三種方法要因地制宜。好比，不能在下拉菜單的頂級元素上應用overflow:hidden，不然做爲其子元素的下拉菜單就不會顯示了，由於下拉菜單會顯示在父元素區域的外部，而這偏偏是overflow:hidden所要阻止的。再好比不能對已經靠自動外邊距居中的元素使用「浮動父元素」技術，不然它不會居中。