JavaScript 参考手册 目录

Style clear 属性

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

什么是 clear 属性

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

如何使用 clear 属性

单边清除浮动

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

示例代码:

----------- -
    ------ -----
-

------------ -
    ------ ------
-

双边清除浮动

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

示例代码:

----------- -
    ------ -----
-

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

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

示例代码:

---- ---------------
    ---- ------------------------ ----------
    ---- ------------------------- -----------
    ---- -------------------------
------

-------
------- -
    ------- --- ----- -----
    ------ -----
-

----------- -
    ------ -----
    ------ ----
-

------------ -
    ------ ------
    ------ ----
-

----------- -
    ------ -----
-
--------

总结

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


下一篇:概览