CSS新手入门笔记整理:CSS清除浮动的方法

2023-12-13 05:42:35
  • 浮动可以让我们灵活地布局,但是也会带来一定的副作用。 父元素高度塌陷,从而导致边框不能撑开,背景色无法显示。 页面布局错乱。
  • 清除浮动,其实就是清除元素被定义浮动之后带来的脱离文档流的影响。浮动可以使元素移到左边或者右边,然后后面的文字或元素会环绕着这个浮动元素。如果不想浮动元素后面的元素环绕着它,希望后面的元素回归到正常文档流中去,这个时候我们可以清除浮动。

clear:both

语法

元素{clear:both;}

属性值

说明

left

清除左浮动

right

清除右浮动

both

同时清除左浮动和右浮动

clear 属性不是应用于浮动元素本身,而是应用于浮动元素后面的元素。

使用 clear:both 来清除浮动,往往会多添加一个 div 标签。这个 div 标签仅仅是为了清除浮动而添加的,没有任何其他意义。但它会增加多余的标签,还会破坏 HTML 代码的语义。


overflow:hidden

语法

父元素{overflow:hidden;}
子元素{float:left;}

overflow:hidden 应用于浮动元素的父元素,而不是当前的浮动元素。

但它会隐藏超出父元素的内容部 分,有时候这并不是我们预期的效果。


::after 伪元素

::after 伪元素结合 clear:both 来清除浮动。

语法

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

定义成一个公共的 class,这个 class 一般取名为“.clearfix”然后对这个类进行全局引用,这样可以减少重复的 CSS 代码。(*zoom:1; 用于解决 IE6、IE7 的浮动问题。)


使用 clear:both 清除浮动会增加多余的标签,使用 overflow:hidden 清除浮动会使超出父元素的部分被隐藏。使用 ::after 伪元素来清除浮动,则不会有这些缺点。在实际开发中,更倾向::after 伪元素于使用方法。


文章来源:https://blog.csdn.net/weixin_55576134/article/details/134940676
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。