浮动属性
浮动可以让元素一个挨着一个。创立一个自然流布局,同时可以设置自身尺寸和父元素容器的尺寸大小。
一个元素浮动时,其余元素会“环绕”他。
当元素浮动时,一个元素的位置取决于放置在他附近的元素,围绕在他附近的第是哪个元素?这个元素会不会换行,这一切取决于围绕在他附近的元素的DOM
浮动存在的问题
典型问题是一个父元素包含多个浮动子元素,页面内容设置一个宽度
,子元素的浮动确定了他们的位置,但浮动的元素不改变父元素的宽度。这样会使父元素塌陷,从而使父元素的高度为“0”,从而忽略其余属性,这种现象多数时候被忽略,特别杂父元素没有样式一起其子元素看起来都很正确的时候。
嵌套的元素不会正确的排列,可能会出现错误,看下例。在box-set的div应该有个灰色背景,由于子元素浮动后,灰色的背景看不到。仔细检查后,box-set的高度变成了“0”’。
结果如下图img
处理方法:
1.清除浮动(clear:both;)
在容器结束标签前加一个空标签,设置空标签的样式“clear:both;”。此情况大多数情况下有效,但假如一个页面需要很多的清除浮动就造成了空标签的堆积。
结果如下图img2:
2.overflow技巧
overflow属性规定当内容溢出元素框时发生的事情。
在具备浮动元素的父容器中设置“overflow”的属性值为“auto”或者“hidden”,父容器会存在一个高度,背景色也就显示。存在的缺点
当增加样式或者者给元素增加一个阴影或者制作一个下拉菜单时,就会出现少量问题,比方给div增加一个阴影,可以看到阴影被父元素切断,无法伸出父元素外。
结果如下图img4:
3.clearfix技巧
清除浮动更好的方法是clearfix技巧。clearfix是基于父元素上使用“:before”和":after"两个伪类。使用伪类在浮动元素的父容器前面和后面创立隐藏元素。“:before”伪类用于防止子元素顶部的外边距塌陷,使用“display:table”创立一个匿名的table-cell元素。“:after”伪类用于防止子元素底部的外边距塌陷,以此来清除元素的浮动。
我们给需要的元素增加group的类名,这样就不会使代码堆叠严重。
效果如下图img5:
其中的子元素可伸出父元素外,并且清除了浮动。