CSS: div is not supported (how to fix external containers cannot be opened after Div float)

CSS: div is not supported (how to fix external containers cannot be opened after Div float)
September 24,201 0 | tags | views 122

Comments 0

When writing HTML code, it is found that in Firefox and other browsers that comply with W3C standards, if a div is used as an external container, if the internal div is set with the float style, the external container Div cannot be opened because there is no clear in it. See the following example:

<Div style = "border: 1px solid red; width: 200px;"> <br/> <Div style = "border: 1px solid blue; float: Left; width: 80px; height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> </div>



Tip: you can modify some HTML code before running, copying, or saving the code.

<Div <br/> style = "border: 1px solid red; width: 200px;"> <br/> <Div <br/> style = "border: 1px solid blue; float: Left; width: 80px; Height: <br/> 80px; "> test Div </div> <br/> <Div style =" border: 1px <br/> solid blue; float: Left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> </div>

Container Div not supported

As you can see, the border of the external container is a red Div and is not opened. This is because the internal Div will lose the clear: Both and display: block styles after float: left, so the external Div will not be opened.
We want the external container Div to increase the height as the internal Div increases. How can we solve this problem?

Previously, I used this method to solve the problem:

<Div style = "width: 200px; Border: 1px solid red;"> <br/> <Div style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test Div </div> <br/> <Div style =" float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test Div </div> <br/> <Div style =" float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test Div </div> <br/> <Div style =" float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test Div </div> <br/> <Div style =" float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test Div </div> <br/> <Div style =" clear: Both; "> </div> <br/> </div>



Tip: you can modify some HTML code before running, copying, or saving the code.

<Div <br/> style = "width: 200px; Border: 1px solid red;"> <br/> <Div <br/> style = "float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test <br/> Div </div> <br/> <Div <br/> style =" float: left; width: 80px; Height: 80px; Border: 1px solid blue; "> test <br/> Div </div> <br/> <Div <br/> style =" float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test <br/> Div </div> <br/> <Div <br/> style =" float: Left; width: 80px; height: 80px; Border: 1px solid blue; "> test <br/> Div </div> <br/> <Div <br/> style =" float: Left; width: 80px; Height: 80px; Border: 1px solid blue; "> test <br/> Div </div> <br/> <Div <br/> style =" clear: both; "> </div> <br/> </div>
The result is as follows:

Show normal

We can see that after all the divs of float: left to be displayed in the container Div, we add such a div :. In this way, the clear action is added at the end.

However
Yes, I always think it is inappropriate to add a div. One is to add a meaningless Div, and the other is to use dojo for Drag &
When you drop, because this div is a byte point of the container Div, if this node is moved, it will cause a typographical BUG: if the DIV of the blue box to be displayed is moved to this Div
Because of clear: both, it will be forced to display another line. Therefore, I have been looking for better solutions.

After countless times of asking about the Google fairy yesterday, I finally found the article "how to clear floats without structural markup" and found a solution.

First, set the following CSS:
CSS code:

. Clearfix: After {<br/> content :". "; <br/> display: block; <br/> Height: 0; <br/> clear: Both; <br/> visibility: hidden; <br/>}



Tip: you can modify some HTML code before running, copying, or saving the code.

. Clearfix: After {<br/> content :". "; <br/> display: block; <br/> Height: 0; <br/> clear: <br/> both; <br/> visibility: hidden; <br/>}

Then, we can modify the original HTML code so that the external container Div can use this CSS:

<Div class = "Clearfix" style = "border: 1px solid red; width: 200px;"> <br/> <Div style = "border: 1px solid blue; float: left; width: 80px; Height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> <Div style =" border: 1px solid blue; float: Left; width: 80px; Height: 80px; "> test Div </div> <br/> </div>



Tip: you can modify some HTML code before running, copying, or saving the code.

<Div <br/> class = "Clearfix" style = "border: 1px solid red; width: <br/> 200px; "> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> <Div style =" border: 1px solid blue; float: <br/> left; width: 80px; Height: 80px; "> test <br/> Div </div> <br/> </div>

In Firefox
And the result is displayed normally. In addition, the drag & drop
No problem. Originally, the CSS of this Clearfix uses the after pseudo object, which will add content at the end of the element that applies Clearfix.

Here we add a period "." and set its display to block; its height to 0; clear to both; and visibility to hide. In this way
The goal is to open the container.

However, Windows IE does not support this. To make ie display perfectly, you must add some hack specifically set for IE after the CSS definition of Clearfix. CSS:
CSS code:

. Clearfix: After {<br/> content :". "; <br/> display: block; <br/> Height: 0; <br/> clear: Both; <br/> visibility: hidden; <br/>}< br/>/* hides from IE-MAC/*/<br/> * HTML. clearfix {Height: 1% ;}< br/>/* end hide from IE-Mac */



Tip: you can modify some HTML code before running, copying, or saving the code.

. Clearfix: After {<br/> content :". "; <br/> display: block; <br/> Height: 0; <br/> clear: <br/> both; <br/> visibility: hidden; <br/>}< br/> <br/>/* hides from IE-MAC/*/<br/> * HTML. clearfix {Height: <br/> 1% ;}< br/>/* end hide from IE-Mac */

Because the escape characters
Mac IE will ignore this hack, But windows IE will not, it will apply * html. Clearfix {height:
1%;} to open the DIV container (it seems that Mac ie cannot solve this problem, but fortunately the number of users is too small, Safari support is enough: P ).

Test it.