CSS浮动

float 属性指定元素是否应该浮动。

clear 属性用于控制浮动元素的行为。

浮动属性

在其最简单的用途, float 属性可以用来包裹图像周围的文字。

下面的示例指定图像应在文本中浮动到右侧：

img {
    float: right;
    margin: 0 0 10px 10px;
}

让我试试

清除属性

clear 属性用于控制浮动元素的行为。

元素漂浮后会绕它流动。为了避免这种情况，使用清除属性。

clear 属性指定元素浮动元素的边不允许浮动：

div {
    clear: left;
}

让我试试

clearfix Hack

如果一个元素比包含它的元素高，并且它是浮动的，它会溢出它容器的外部。

然后我们能添加 overflow: auto; 到包含元素来解决这个问题：

.clearfix {
    overflow: auto;
}

让我试试

overflow:auto clearfix 只要你能控制你的边距和填充 (可能会看到滚动条). 新的，现代的clearfixhack，使用更安全，下面的代码是用于大多数网页：

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

让我试试

You will learn more about the ::after pseduo-element in a later chapter.

Web 布局实例

通常使用float属性去布局整个web页面。

.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}

.column {
    float: left;
    padding: 15px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.menu {
    width: 25%;
}

.content {
    width: 75%;
}

让我试试

所有的CSS浮动属性