CSS 浮动

最新推荐文章于 2025-06-05 21:56:10 发布

原创最新推荐文章于 2025-06-05 21:56:10 发布 · 662 阅读

CC 4.0 BY-SA版权

8 篇文章

订阅专栏

一、定义和用法

float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，而不论它本身是何种元素，并且它们会尽可能地窄。

二、清除浮动

1. 在浮动元素后增加一个块级元素，并设置 CSS 的 clear 属性为 both，比如：<div style="clear: both;"></div>。

2. 给浮动元素的容器添加 overflow: hidden; 或 overflow: auto; 。另外在 IE6 中还需要触发 hasLayout，例如为父元素设置容器宽高或设置 zoom: 1。

3. 给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

4. 给浮动元素的容器添加一个 clearfix 的类，然后给这个类添加一个 :after 伪元素实现元素末尾添加一个看不见的块元素清理浮动。

.clearfix {
    zoom: 1;
}
.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}