CSS float and clear float

1.Floating

1. Features:

1. Do not occupy the original position (off the mark)

2. Allows block-level elements to be displayed on a single line

3. Float can convert inline elements into inline block elements

2Clear Floating

Clear float refers to the effect of clear float

Note:

when a child element is set to float, the parent element has no height, causing the page layout to be cluttered. In this case, clear the float.

3 several ways to clear floating

1. Using clear:left| Right | Both

Clear:both;

This is done when you need to clear all floating elements inside a floating parent element and add a label that is clearly floating, an empty tag can be a div tag, a P tag, and so on, and defines the CSS code for it: Clear:both.

2. Set the Overflow:hidden for the parent box

This method solves the drawback of increasing unintentional code by clearing floats with empty tag elements. Using this method is simply to define the CSS property in the element that needs to clear the float: overflow, we can use hiddent and auto values to clear the float, but remember not to use visible.

If the parent box has positioned elements, it is generally not recommended to use this method to clear the float.

3. Using pseudo-elements to clear floating

. clear:after{

Content: ";

Display:block;

Visibility:hidden;

height:0;

line-height:0;

Clear:both

}

. clear{

ZOOM:1/* Resolve compatible IE browser */

}

4 use of Overflow

1. Hidden Hide out of the section

2.Auto

If the content is outside the box, set the scroll bar for the box, and if the content does not exceed the box, the scroll bar is not displayed.

3.sCorll

Add scroll bar

CSS float and clear float