html+css基础教程入门篇之CSS 浮动行框和清理

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

some text

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

.clear { clear: both; }

some text

<div class="clear"></div>

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法，那就是对容器 div 进行浮动：

.news {

background-color: gray;

border: solid 1px black;

float: left;

}

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 .news img {

float: left;

}

.news p {

float: right;

}

some text

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

[](()CSS clear 属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明：clear 属性定义了元素的哪边上不允许出现浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

clear属性可选值如下：

left:在左侧不允许浮动元素

right:在右侧不允许浮动元素

both:在左右两侧均不允许浮动元素

none:默认值。允许浮动元素出现在两侧

inherit:规定应该从父元素继承 clear 属性的值

清除浮动的常用方法

.clearfix:after{ content:“”; height:0;

visibility:hidden; display:block; clear:both;}

.clearfix{ zoom:1;}

.clear { clear:both }

内层div或者其他标签内含有浮动元素, 则可以直接在外层加clearfix样式即可以清除浮动. 这是兼容性最好的一种方法.

实例

利用浮动制作图片横向列表

html代码如下：

• 
• 
• 
•