-
The float property
浮动可以让元素一个挨着一个。创建一个布局，同时可以设置自身尺寸和父元 素容器的尺寸大小。一个元素浮动时，其他元素会围着它。 -
Floating problems
典型问题是一个父元素里面创建多个浮动子元素后，页面内容设置一个宽度，子元素的浮动确定了他们的位置，但浮动的元素不改变父元素的宽度。这样会让父元素塌陷的，显示出来的父元素的高度就变成了0，导致它的好多属性被隐藏了，这种现象多数时候被忽略，特别是父元素没有样式但是和它的子元素看起来都很正确的时候。 -
Examples of the above-described problems, such as the following. In the box-1 div should have a gray background, because the child elements float, gray background can not see. After careful examination, box-1 height becomes "0" '.
结果如下图jpg
-
Clean up floating
-
Use clear: both;
before the end of the container plus an empty tag label, styling empty label "clear: both;". This situation basically effective, but if a page takes a lot of cleaning up floating, it will be more good out of the code useless.
-
The results shown below jpg
-
Use overflow
overflow property specifies what happens if content overflows when the element's box. Settings "overflow" parent container floating in the attribute value of the element "auto" or "hidden", will generate a parent container height, while it, the background color will come out.
-
But it has disadvantages
when adding style elements or to add a shadow or when making a drop-down menu, there will be some problems, such as div to add a shadow, you can see the shadow of the parent element is cut off, can not extend outside of the parent element. Is not recommended
-
Use clearfix
clean up floating better approach is clearfix skills. clearfix is based on the use of the parent element ": before" and ": after" pseudo two classes. Pseudo-class parent create a hidden element of the container front and rear floating element. ": Before" pseudo-class is used to prevent outside elements from collapsing on top of the child, using "display: table" Create an anonymous table-cell elements. ": After" pseudo-class for preventing the bottom of the outer sub-elements from collapsing, so that the problem of floating elements can be cleaned up.
-
The results shown below jpg
-
In this way, he stretched out outside the sub-elements of the parent element, and clean up the float.
