Clear the floating method, the collapse of the margin and some compatibility issues of the browser

clear float

1) Heightening method:

Floating elements can only be closed by boxes with height. That is to say, if there is a float inside the box and the box has a height, then properly, the float will not affect each other. However, at work, we definitely don't add height to all the boxes, because of the hassle and not being able to adapt to the rapid changes of the page.

 <div>   → 设置height
        <p></p>
        <p></p>
        <p></p>
</div>  
<div>   → 设置height
        <p></p>
        <p></p>
        <p></p>
</div>

/*清除浮动方法：加高，这样两个盒子互不影响*/
div {
    height: 800px;
}
p {
    float: left;
}

2) clear:both;法

The easiest way to clear the float is to add clear:both to the box; it represents its own internal elements and is not affected by other boxes.

<div>
    <p></p>
    <p></p>
    <p></p>
</div>  
<div>   → clear:both;
    <p></p>
    <p></p>
    <p></p>
</div>

The floats are indeed cleared and won't affect each other anymore.
Here comes the problem! ! !
It is margin failure. There is no gap between the two divs.

3.1) Partition method:

Between the two floating elements, build a wall. Separate the two parts of the float, so that the following floating elements do not chase the preceding floating elements. The wall uses its own body as a gap.

The wall must have clear: both;

<div>
    <p></p>
    <p></p>
    <p></p>
</div>
<div class="cl h10"></div>  
 <div>
    <p></p>
    <p></p>
    <p></p>
 </div>

.h10 {
    height: 1px;
}
.cl {
    clear: both;
}

The first div found by this method has no height. Hence method 4.

3.2) Inner wall method:

<div>
    <p></p>
    <p></p>
    <p></p>
    <div class="cl h10"></div>
</div>
<div>
    <p></p>
    <p></p>
    <p></p>
</div>

The advantage of the inner wall method is that it can not only prevent the p in the rear part from chasing the p in the front part, but also stretch the first div out of height. In this way, the background and border of this div can be stretched according to the height of p.

4）overflow:hidden

The original intention of this property is to hide all the contents of the overflow box. However, we found that this thing can be used for float clearing.

We know that a father cannot be held up by his floating son, but if the father adds overflow:hidden; then the father can be held up by his floating son.

Note: The overflow:hidden method enables the margin to take effect.

<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta ea facere fuga Ab est id porro reprehenderit?
    </p>
    <p>
        iusto magni praesentium quidem quo similique. Accusamus, vero!
    </p>
    <p>quis sequi veritatis!</p>
</div>
<div>
    <p>Lorem eveniet!</p>
    <p>Lorem ipsum psa officiis, quod reiciendis sed vel.</p>
    <p>Lorem  unde voluptas.</p>
</div>

div {
/*使用overflow方法，会使得div有高度，从而清除浮动*/
    overflow: hidden;
}
p {
    float: left;
    width: 200px;
    height: 200px;
}

Collapse of margin

In the standard document flow, the margins in the vertical direction
are
.

    <div class='box1'></div>
    <div class='box2'></div>

.box1 {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-bottom: 20px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 50px;
    }

As shown by the above code:
two boxes, box1, box2. The bottom margin of box1 is 20px, and the top margin of box2 is 50px.
And the collapse phenomenon causes: the spacing between box1 and box2 is only 50px
write picture description here

From the collapse phenomenon of margin, we get:

Be good at using the padding of the father, not the margin of the son

E.g:

<div>
    <p></p>
</div>

p {
    margin-top: 10px;
}

Case 1: When the parent element does not set the border property,
since the parent element has no border, the parent element and the child element will go down together
Case 2: When the parent element sets the border property, there is a vertical distance of 10px between the
parent element and the child element

Browser compatibility issues

1) (miniature box) IE6, does not support boxes smaller than 12px, any box smaller than 12px will be large in IE6

Solution: Set the font size of the box to be small (less than the height of the box), such as 0px.

 height: 4px;
_font-size: 0px;

IE6 has left a backdoor, that is, as long as you add an underline to the CSS property, this property is a proprietary property recognized by IE6.

  /*比如：*/
_background-color: green;

2) IE6 does not support using overflow:hidden; to clear floating

The solution: fight poison with poison. Append a _zoom:1;

/*完整写法：*/
overflow: hidden;
_zoom:1;

In fact, _zoom:1; triggers the browser's hasLayout mechanism.

Note: The original intention of overflow:hidden; is to hide things that overflow the border of the box. The overflow function is compatible with IE6. Incompatible is to use overflow:hidden; to clear the float.

3) Selector compatibility issues

The following are all IE6 compatible selectors:

p                标签选择器
\#box            id选择器
.spec            类选择器
div.box          交集选择家
div .box         后代选择器
div , .box       并集选择器
*                全局选择器

2. The following are compatible with IE7:

div>p           子代选择器
div+p           兄弟选择器

3. The following are compatible with IE8:

伪类选择器:
divp:first-child  
div p:last-child
div p:nth-child(2)

4) IE6 compatibility issues with margins

When there is a continuous floating element with the same margin as the floating direction, the element at the head of the team will double the margin

<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<a href="#">a5</a>
<a href="#">a6</a>

a {
    /*所有元素都这样浮动，并带了40px的左margin*/
    float: left;
    margin-right: 40px;
    /*这样使得第一个元素带了80px的左margin*/
}

Solution: Give half the left margin of the first element of the team (ie: give the first a label half the left margin)

  _margin-left: 20px;/*下划线只有IE6识别*/

5) Fixed positioning (IE6 is not compatible)

position: fixed;