My understanding and understanding of floating (2)

In the previous article, I wrote my understanding of float (1), which mainly describes the initial intention of float and some actual problems brought about by float. Smart CSS developers use the placeholder feature of CSS for layout, which has indeed achieved some good results,

But it also brings some practical problems. For exampleThere is no height after float, and the height is 0. Please pay attention to this phenomenon by the majority of CSS developers. Otherwise, some strange problems may occur.

How can this problem be solved? That is, clear floating

There are two methods:

1) Use a pseudo object (no new tags required ),CodeAs follows:

. Clearfix: After {content: "."; display: block; Height: 0; clear: Both, visibility: hidden}

. Clearfix {ZOOM: 1}

First, analyze the meaning of the first line of code:

About content

Content is translated into Chinese, which is introduced in css2.1. It can use: before and: After to generate content. Browsers supported by this attribute include (IE8, 9 (IE6, 7 are not supported), chrome2 +, firefox1.5 +)

I wrote a demo. You can try it. The Code is as follows:

1 <! Doctype html >
2 < Html >
3 < Head >
4 < Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = gb2312"   />
5 < Style Type = "Text/CSS" >
6 . Test1: before {
7 Content : 'Before test display'
8 }
9 . Test1: After {
10 Content : 'Before test display'
11 }
12 . Test2: After {
13 Content : 'Before test display'
14 }
15 </ Style >
16 < Title > </ Title >
17 </ Head >
18 < Body >
19 < Div Class = "Test1"   > < Span Style = "Color: Blue; Background: Red" > Baidu </ Span > </ Div >
20 < Div Class = "Test2"   > Baidu Space </ Div >
21 </ Body >

22 </Html> 

The effect is as follows:

 

According to different labels, display may be an inline element. Therefore, set it to block, set the height to 0, and clear the floating around. Invisible. This can solve the problems of IE8 +, Firefox, and chrome.

For IE6 and 7, we can use the following code to trigger layout.

 

2) Add new labels

Add a label after the last child node of the package Element

<Div style = "clear: both"> </div>

The W3C recommended method.

I recommend the first method.