css之float和clear

最新推荐文章于 2022-07-07 15:04:44 发布

转载最新推荐文章于 2022-07-07 15:04:44 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/866703/blog/221785

本文详细讲解了CSS中浮动元素的概念及应用，通过实例演示了如何使用浮动实现三栏布局，并探讨了不同方法来解决浮动元素导致的布局问题。

为什么80%的码农都做不了架构师？>>>

浮动元素

浮动元素位于“文档流”外部，因而它不包含在标记中的父元素之内。那么什么时候我们需要用到浮动元素呢？举个最简单的例子，例如有些blog，有header，section, footer，其中section三栏布局，左侧是博文分类，中间是博文列表，右侧是一些信息。首先我们可以写出它的结构

<body>
    <header>头部</header>
    <section>
	<aside>左侧</aside>
	<iframe>内容</iframe>
	<aside>右侧</aside>
    </section>
    <footer>底部</footer>
</body>

现在我们看到的是常规文档流，即块级元素包围着所有子元素，而且在页面中自上而下相互堆叠在一起。这时我们为了达到三栏布局，最简单的方式就是运用浮动。

*{ 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:

overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用该声明之后，包含元素仍然保持其设定的高度和宽度，而超大的子内容则会被容器剪切掉。除此之外，overflow:hidden还有另一个作用，就是它能可靠地迫使父元素包含其浮动的子元素。

第二种：同时浮动父元素。在section中添加float:left;width:100%;。其实现效果如下图所示：

浮动父元素之后，不管其子元素是否浮动，它都会紧紧包裹住它的子元素。因此需要用width:100%再让section与浏览器容器等宽。另外，由于section现在也浮动了，所以footer会努力往上挤到它旁边去。为了强制footer依然呆在section下方，要给它应用clear:left。被清除的元素不会向上浮动，不让它超过浮动元素的下方边界。

第三种：添加非浮动的清除元素

第三种强制父元素包含其浮动子元素的方法，就是给父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于浮动元素的下方，因此包含元素一定会包含这个子元素-----以及前面的浮动元素。在包含元素最后添加子元素作为清除元素的方式有两种。第一种，纯添加一个表现的div。如以下代码：

<body>
		<header>头部</header>
		<section>
			<aside>左侧</aside>
			<iframe>内容</iframe>
			<aside>右侧</aside>
			<div class="clear"></div>
		</section>
		<footer>底部</footer>
	</body>

在css中添加

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