CSS 的 Float(浮动), 会使元素向左或向右移动, 其周围的元素也会重新排列. Float(浮动), 往往是用于图像, 但它在布局时一样非常有用. 那么如何让 float 不再浮动? 即如何清除浮动呢? 下面本篇文章给大家介绍一下.
什么是 CSS 清除浮动?
在非 IE 浏览器 (如 Firefox) 下, 当容器的高度为 auto, 且容器的内容中有浮动 (float 为 left 或 right) 的元素, 在这种情况下, 容器的高度不能自动伸长以适应内容的高度, 使得内容溢出到容器外面而影响 (甚至破坏) 布局的现象. 这个现象叫浮动溢出, 为了防止这个现象的出现而进行的 CSS 处理, 就叫 CSS 清除浮动.
引用 W3C 的例子, news 容器没有包围浮动的元素.
- .news {
- background-color: gray;
- border: solid 1px black;
- }
- .news img {
- float: left;
- }
- .news p {
- float: right;
- }
- <div class="news">
- <img src="news-pic.jpg" />
- <p>some text</p>
- </div>
清除浮动方法
方法一: 使用带 clear 属性的空元素
在浮动元素后使用一个空元素如 < div class="clear"></div>, 并在 CSS 中赋予. clear{clear:both;}属性即可清理浮动. 亦可使用 < br class="clear" />或 < hr class="clear" />来进行清理.
- .news {
- background-color: gray;
- border: solid 1px black;
- }
- .news img {
- float: left;
- }
- .news p {
- float: right;
- }
- .clear {
- clear: both;
- }
- <div class="news">
- <img src="news-pic.jpg" />
- <p>some text</p>
- <div class="clear"></div>
- </div>
优点: 简单, 代码少, 浏览器兼容性好.
缺点: 需要添加大量无语义的 html 元素, 代码不够优雅, 后期不容易维护.
方法二: 使用 CSS 的 overflow 属性
给浮动元素的容器添加 overflow:hidden; 或 overflow:auto; 可以清除浮动, 另外在 IE6 中还需要触发 hasLayout , 例如为父元素设置容器宽高或设置 zoom:1.
在添加 overflow 属性后, 浮动元素又回到了容器层, 把容器高度撑起, 达到了清理浮动的效果.
- .news {
- background-color: gray;
- border: solid 1px black;
- overflow: hidden;
- *zoom: 1;
- }
- .news img {
- float: left;
- }
- .news p {
- float: right;
- }
- <div class="news">
- <img src="news-pic.jpg" />
- <p>some text</p>
- </div>
方法三: 给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动, 但是这样会使其整体浮动, 影响布局, 不推荐使用.
方法四: 使用邻接元素处理
什么都不做, 给浮动元素后面的元素添加 clear 属性.
- .news {
- background-color: gray;
- border: solid 1px black;
- }
- .news img {
- float: left;
- }
- .news p {
- float: right;
- }
- .content{
- clear:both;
- }
- <div class="news">
- <img src="news-pic.jpg" />
- <p>some text</p>
- <div class="content"></div>
- </div>
方法五: 使用 CSS 的: after 伪元素
结合 :after 伪元素 (注意这不是伪类, 而是伪元素, 代表一个元素之后最近的元素) 和 IEhack , 可以完美兼容当前主流的各大浏览器, 这里的 IEhack 指的是触发 hasLayout.
给浮动元素的容器添加一个 clearfix 的 class, 然后给这个 class 添加一个: after 伪元素实现元素末尾添加一个看不见的块元素 (Block element) 清理浮动.
- .news {
- background-color: gray;
- border: solid 1px black;
- }
- .news img {
- float: left;
- }
- .news p {
- float: right;
- }
- .clearfix:after{
- content: "020";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
- .clearfix {
- /* 触发 hasLayout */
- zoom: 1;
- }
- <div class="news clearfix">
- <img src="news-pic.jpg" />
- <p>some text</p>
- </div>
通过 CSS 伪元素在容器的内部元素最后添加了一个看不见的空格 "020" 或点 ".", 并且赋予 clear 属性来清除浮动. 需要注意的是为了 IE6 和 IE7 浏览器, 要给 clearfix 这个 class 添加一条 zoom:1; 触发 haslayout.
总结
通过上面的例子, 我们不难发现清除浮动的方法可以分成两类:
一是利用 clear 属性, 包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素, 其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的.
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文), 使到该父元素可以包含浮动元素, 关于这一点.
更多 CSS 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!
来源: http://www.css88.com/qa/css3/18107.html