CSS floating related solutions_html/css_WEB-ITnose

Problems caused by floating elements:

1. When the first-level child elements of the parent element are all floating elements, the height of the parent element cannot be expanded, affecting the height of the parent element. Elements at the same level of the element

2. Non-floating elements (content) at the same level as the floating element will follow

3. If the first element is not floated, the elements before it will It also needs to be floated, otherwise it will affect the structure of the page display

Solution:

Use the clear:both; attribute in CSS to clear the float of the element. 2. Question 3. For question 1, add the following styles and add clearfix style to the parent element:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-block;} /* for IE/Mac */

Several ways to clear floats:

1. Additional tags Method,

(Disadvantage: However, this method will add additional tags and make the HTML structure look less concise.)

2. Use after Pseudo class (only applicable to non-IE browsers)

#parent:after{    content:".";    height:0;    visibility:hidden;    display:block;    clear:both;}

3. Floating external elements

4. Set overflow to hidden or auto zoom:1 (for compatibility with IE6)