当前位置: 首页 > Web前端 > CSS

css清除浮动的原理和方法

时间:2023-03-30 17:28:27 CSS

1、清除原理1.1、什么是浮动官方的说法是一个浮动框可以向左或者向右移动,直到它的外边缘接触到包含框或者另一个浮动框的边框。由于浮动元素不在文档的正常流中,因此文档正常流中的块框表现得好像浮动元素不存在一样。详情请见官网。一开始人们用浮动来实现图文环绕的效果,后来也用浮动来实现一定的布局,但这会造成一个典型的问题,就是影响兄弟元素的位置和父元素的高度元素崩溃。1.2浮动效果如果兄弟元素是块级元素,会被浮动元素遮挡,如果是内联元素,会尽可能包围浮动元素。1.2.1图形环绕:

环绕文字WrappingtextWrappingtextWrappingtextWrappingtexttextwrappingtextwrappingtextwrappingtextwrappingtextwrappingtextwrappingtextwrappingtextwrappingtextwrappingtextwrappingtext

.box{宽度:400px;border:1pxsolid#333;}.picture{宽度:50px;高度:50px;float:left;}1.2.2兄弟元素被覆盖兄弟1
二哥
三哥
.sibling{背景:红色;宽度:170px;height:50px;}1哥被飘动的图片遮住了,但是文字还是有环绕效果,强吗?1.2.3父元素高度折叠.picture{width:50px;高度:50px;浮动:左;}.son{背景:红色;宽度:50px;高度:50px;float:right;}显然后两种效果不是我们想要的,所以我们得想办法解决~2.如何清除2.1清除属性设置原理定义不允许浮动元素的元素一侧。在CSS1和CSS2中,这是通过自动向透明元素(即具有透明属性集的元素)添加上边距来实现的。在CSS2.1中,在元素的上边距上方添加了一个空白空间,而边距本身并没有改变。无论哪种方式,最终结果都是一样的,如果声明为left或rightcleared,都会使元素的topborder边框正好在元素的bottommargin边框的下方浮动在那一侧。1)clearfloating:也就是我们常说的clear属性,css中对应的属性是clear:left|对|两者|没有任何;2)关闭浮动:更准确的意思是关闭浮动元素,从而减少浮动的影响。现在清除了浮动,但这只是清除了浮动对兄弟元素的影响,并没有解决高度塌陷的问题。因此,我们需要一种更高级的清浮——闭浮。为什么叫封闭式浮漂?因为浮动元素脱离了正常流动,对其父元素没有关闭,所以需要关闭浮动。3.2方法方法一:使用空的div,大家都知道会产生无意义的标签;方法二:在父元素中添加overflow:hidden,利用bfc原理,缺点是需要超出父元素的部分会被拦截,所以这个方法要看情况;方法三:使用after伪元素来满足需求而不生成实际的dom,多好啊~。

环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字

.box:after{content:'';显示:块;明确:两者;*zoom:1;/*IE6-7不支持:after需要触发hasLayout*/}参考资料:http://www.iyunlu.com/view/cs...https://blog.csdn.net/王家...