CSS Clear Float

Problems arising from floating:

If the height of the parent container is auto, not the fixed value, the height of the parent container collapses when the child element is set to float, not the height of the quilt element, and in order to solve the problem, the float is cleared.

To clear floating methods:

1. Set a fixed height value for the parent container, which does not apply to cases where the height of the floating element is indeterminate

2. Add extra tags to add an empty label to the floating element after the clear property

<style= "Clear:both;" ></ Div >

Cons: will add meaningless tags

3. Add a <br/> tag with a clear attribute, similar to 2

<style= "Clear:both;" />

4, add Overflow:hidden to the parent container;

{   overflow:hidden;    } . box. Son {   float:left;}

5. Floating is also added to the floating element's parent container, but in this way it affects the layout of the neighboring elements of the parent container.

6. Set the Display:inline-block for the parent element, or display:table; but the change of box model property will cause a series of problems

7. Add a clear property to the parent container of the floating element: after pseudo-element, ie6-7 does not support pseudo-elements, uses zoom:1 to trigger Haslayout

. Clearfix::after {  content: "";    Display: block;    height: 0;    Clear: both;    Visibility: hidden;    }
.clearfix { *zoom:1; }

Summary:

1. Clear Property

2, by triggering BFC (block-level formatting context)

Recommended: using:: After pseudo-elements

Expand:

1, BFC Concept: The elements with BFC characteristics can be considered as isolated containers, the elements inside the container will not affect the layout of the elements outside, you can think of BFC as a closed large box, the elements inside the box boil, will not affect the outside.

Standard document flow in the positioning system (two other positioning systems are floating and absolute positioning)

2, Trigger BFC: As long as any one of the following can be triggered

①body root Element

② floating element: float except for the value other than none

③ Absolute positioning elements: psition:absolute;

④display for Inline-block, Table-cells, Flex

⑤overflow values other than visible (hidden, auto, scroll)

3. BFC Characteristics and application

① the outer margin of the same BFC collapses (the distance of two block-level elements is the value of margin); If you want to avoid overlapping of the outside, you can place it in a different BFC container

②BFC can contain floating elements (clear float)

Normally, floating is out of standard document flow, and parent container height collapses

<style= "border:1px solid #000;" >    <  style= "Width:100px;height:100px;background: #eee; float:left;" ></ Div > </ Div >

Because the elements inside the container float, the container has only 2px of margin height left. If the BFC of the container is triggered, then the container will wrap the floating element

<style= "border:1px solid #000;  Overflow:hidden">    <style=" Width:100px;height: 100px;background: #eee; float:left; " ></ Div >     </ Div >

③BFC does not overlap with floating elements

<style= "Height:100px;width:100px;float:left;background:lightblue"> I am a left floating element </div><style= "width:200px ; Height:200px;background: #eee "> I was a no set floating, nor triggered BFC element, width:200px; height:200px; Background: #eee; </ Div >

In fact, the second element is partially covered by a floating element (the text will not be overwritten) if you want to avoid the element overlay, you can trigger the BFC attribute of the second element and add Overflow:hidden to the second element;

CSS Clear Float