Style clear 属性

在网页开发中，我们经常会遇到一些布局问题，其中一个常见的问题就是浮动元素导致父元素高度塌陷。为了解决这个问题，我们可以使用clear属性。

什么是 clear 属性

clear属性是一个用来指定一个元素在哪一侧不允许其他浮动元素的属性。它可以取三个值：left、right和both。当一个元素设置了clear属性后，会清除其前面的浮动元素，使其在该元素下方显示。

如何使用 clear 属性

单边清除浮动

如果你想要清除元素左侧的浮动，可以使用clear: left;；如果想要清除元素右侧的浮动，可以使用clear: right;。

示例代码：

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

双边清除浮动

有时候我们需要清除元素两侧的浮动，这时可以使用clear: both;。

示例代码：

.clear-both {
    clear: both;
}

使用 clear 属性解决父元素高度塌陷问题

通常在父元素包含了浮动元素时，会导致父元素高度塌陷，这时可以在父元素上添加clear: both;来清除浮动，从而解决高度塌陷问题。

示例代码：

// www.javascriptcn.com code example
<div class="parent">
    <div class="float-left">Float Left</div>
    <div class="float-right">Float Right</div>
    <div class="clear-both"></div>
</div>

<style>
.parent {
    border: 1px solid #000;
    clear: both;
}

.float-left {
    float: left;
    width: 50%;
}

.float-right {
    float: right;
    width: 50%;
}

.clear-both {
    clear: both;
}
</style>

总结

通过clear属性，我们可以很方便地解冰浮动元素导致的布局问题，保证页面显示的正常。希望本文对你有所帮助！