Day_8. Impeccable web design-cleverly float effects and impeccable web Design

Day_8. Impeccable web design-cleverly float effects and impeccable web Design

> The content in this chapter is somewhat outdated. It mainly describes how to replace the table layout with float. But I mentioned several methods of clear floating, so let's summarize how to clear floating today.

#### Why is floating cleared?
Although it is to clear the floating, it is actually to clear the impact of floating.
The height of the floating element will collapse, and the height collapse makes it one of the most important reasons for us to clear the floating layout.

#### Methods for clearing floating:
1. Parent div defines height

-Principle: if the parent div manually defines the height, the parent div cannot automatically obtain the height.
-Advantages: simple, less code, and easy to master
-Disadvantage: It is only suitable for layout with fixed height. Precise height should be given. If the height is different from that of the parent div, problems may occur.
-Suggestion: it is not recommended to use it. It is only recommended to use the layout with a 'height fix '.

2. Add the empty div label clear: both at the end.

-Principle: add an empty div and use the clear: both clear float provided by CSS to automatically retrieve the height of the parent div.
-Advantages: simple, less code, good browser support, and not prone to strange problems
-Disadvantage: if there are many floating ladiv s on the page, a lot of empty divs will be added.
-Suggestion: This method is not recommended, but is frequently used.

3. Parent div defines pseudo classes: after and zoom

-Principle: IE8 or above is supported by non-IE browsers. The principle is similar to 2. zoom (IE private attribute) can solve the floating problem of ie6 and ie7.
-Advantages: Good browser support, not prone to strange issues (currently: large websites are used, such as tengxun, Netease, Sina, etc)
-Disadvantages: There are many codes, and many beginners do not understand the principle. It is necessary to combine two sentences of code to support mainstream browsers.
-Suggestion: It is recommended that public classes be defined to reduce css code.

4. Parent div defines overflow: hidden

-Principle: width or zoom: 1 must be defined, and height cannot be defined. When overflow: hidden is used, the browser automatically checks the floating area height.
-Advantages: simple, less code, and good browser support
-Disadvantage: it cannot be used with position because the excess size is hidden.
-Suggestion: only friends who do not use position are recommended.

5. Parent div defines overflow: auto

-Principle: width or zoom: 1 must be defined, and height cannot be defined. When overflow: auto is used, the browser automatically checks the height of the floating area.
-Advantages: simple, less code, and good browser support
-Disadvantage: the scroll bar appears when the internal width and height exceed the parent div.
-Suggestion: it is not recommended. If you need a scroll bar or make sure that your code does not appear, use it.

6. Parent div also floats together

-Principle: When all code is floating together, it becomes a whole.
-Advantages: 'No advantages'
-Disadvantage: there will be a new floating problem.
-Suggestion: it is not recommended for use only for understanding.

7. Parent div definition display: table

-Principle: Convert div attributes into tables
-Advantages: 'No advantages'
-Disadvantage: New unknown problems may occur.
-Suggestion: it is not recommended for use only for understanding.

8. Add the br label clear: both at the end.

-Principle: the parent div defines zoom: 1 to solve the IE floating problem. Add the br label clear: both at the end.
-Suggestion: it is not recommended for use only for understanding.