ul因为li浮动而没有被撑开,是否一定要清除浮动?不清除有没有什么危害?

发布于 2022-09-01 16:11:50 字数 157 浏览 22 评论 0

像“关于百度”这个页面的导航条就是没有被清除的,也是这样放着,是不是意味着清不清除无所谓?
图片描述

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

埋情葬爱 2022-09-08 16:11:51

不清除浮动的一个常见危害是高度塌陷。关于高度,下面说这么几种情况:

  1. 如果父元素已经规定了度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话)
  2. 如果父元素没有规定高度:
    2.1 如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保不住子元素
    2.2 如果存在没有浮动的子元素,父元素高度取决于没有浮动的子元素,所以如果浮动子元素更高的话,还是会塌陷

解决浮动的办法: clear:both,不允许元素两侧有浮动(你可以理解为,遇到浮动元素会往下挪,从而撑起高度)

  1. 使用::after伪元素
.cl{zoom:1;}
.cl::after{content:'';display:block;height:0;visibility:hidden;clear:both;}

加两个点是CSS3新规,兼容的话一个点就好

  1. 直接为父元素建立一个清除浮动的最末子元素,如
<div>
    <div style="float:left;">I M LEFT</div>
    <div style="float:right;">I M RIGHT</div>
    <div style="clear:both;"></div>
</div>

缺点在于创建了不必要的节点,所以普遍做法是第一种

掩耳倾听 2022-09-08 16:11:51

在堆叠布局的时候就会有问题,上面的这个例子应该是整个头部设定了固定高度,因此ul高度为零整个头部也没有高度塌陷。
浮动布局推荐养成清除浮动的习惯,以避免各种奇葩问题。

你的背包 2022-09-08 16:11:51

良好的编程实践是要清除。编程能满足需求对程序员来说是最基本的,有良好的编程习惯又上了一个层次了。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文