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所要阻止的。再好比不能对已经靠自动外边距居中的元素使用“浮动父元素”技术，不然它不会居中。

没有父元素如何清除

有时候，在清除某些浮动元素时，不必定正好有那么个父元素能够做为容器来强行包围它们。此时，最简单的方法就是给一个浮动元素应用clear:both，强迫它定位在前一个浮动元素的下方。然而，在空间足以容纳多个元素向上浮动时，这个方法未必有效。

关于三栏布局，建议看《css权威指南》第五章。