1、在以下情况下需要清除:
在对元素设置浮动时,元素就会脱离文档流,在css中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素,float主要流行与页面布局,使用之后没有清除就会后患无穷。
2、常用到清除方法:
第一种:使用空标签取出浮动
;
第二种:父级div定义overflow:auto(注意:是父级div也就是这里的div.outer);
第三种:after方法(作用于浮动元素的父元素)它就是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。 其中clear:both;指清除所有浮动;content:‘.’;display:block;其中content()可以取值也可以为空。Visbility:hidden的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清除浮动。
总结:其实就是两种清除的方法:
一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素,关于这一点。
css布局时什么时候需要清除浮动以及清除浮动都有哪些方法?
最新推荐文章于 2024-02-06 17:21:22 发布