Clear Div Float-use: After

Source: Internet
Author: User
Tags modify visibility xmlns
Floating

Features: Do not need to add a separate purge div.

: After (pseudo object)--the content that occurs after the object is set, is usually used in conjunction with content, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser.
Css

. wrapfix:after {    content: ".";     Display:block;    height:0;     Clear:both;     

Set Display:block; apply to: After element, because display's default value is "inline", you cannot receive clear attributes, set the height of the purge container to zero, height:0, and the visibility is hidden. This is not cleared to float. Non-IE browsers do not see the wrap background and borders.

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> Clear float--use:after--clearing</title> <style type=" Text/css "> <!--*{ padding:0; margin:0; body{font:85%/140% Arial, Helvetica, Sans-serif; padding:10px 0; Text-align:center; }. Wrap {border:1px solid #999999; margin:0 Auto; width:762px; w\idth:760px; Background: #ECECEC; Text-align:left; }. wrapfix:after{content: "."; Display:block; height:0; Clear:both; Visibility:hidden; } #sidel {float:left; width:160px; } #sider {float:right; width:600px; Background: #F9F9F9; } p,pre,em{padding:10px}--> </style></pead><body> <div class= "wrap" > <div id= "Sider" > <p> Clear Float--use: After </p> <em> This is not cleared to float. Non-IE browsers do not see the background and edges of the wrapBox </em> <p> Features: No additional purge div.</p> <p>:after (Pseudo object)--set what happens after the object, usually in conjunction with the content, IE does not support this pseudo object, Non-IE browser support, so does not affect the Ie/win browser. </p> <p>CSS</p> <pre> #wrap: After {content: "."; Display:block; height:0; Clear:both; Visibility:hidden;} </pre><p> set Display:block apply to: After element, because display's default value is "inline", you cannot receive the attribute of clear, and the height of the purge container is set to zero, and height:  0, visibility to hidden </p></div> <div id= "Sidel" ><p>left</p> <p> </p> < /div> </div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

This is cleared of floating. Non-IE browsers see the wrap background and borders.

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/> <title> Clear float--use:after--clearing</title> <style type=" Text/css "> <!--*{ padding:0; margin:0; body{font:85%/140% Arial, Helvetica, Sans-serif; padding:10px 0; Text-align:center; }. Wrap {border:1px solid #999999; margin:0 Auto; width:762px; w\idth:760px; Background: #ECECEC; Text-align:left; }. wrapfix:after{content: "."; Display:block; height:0; Clear:both; Visibility:hidden; } #sidel {float:left; width:160px; } #sider {float:right; width:600px; Background: #F9F9F9; p,pre{padding:10px}--> </style></pead><body> <div class= "Wrap Wrapfix" > <div id= "s Ider "> <p> clear Float--use: After </p> <p> features: No need to add another purge DIV.&LT;/P&GT <p><em> This is cleared for floating. Non-IE browsers see the wrap background and borders. </em></p> <p>:after (Pseudo object)--the content that occurs after the object is set, is usually used in conjunction with content, IE does not support this pseudo object, not IE browser support, so does not affect the Ie/win browser. </p> <p>CSS</p> <pre> #wrap: After {content: "."; Display:block; height:0; Clear:both; Visibility:hidden;} </pre><p> set Display:block apply to: After element, because display's default value is "inline", you cannot receive the attribute of clear, and the height of the purge container is set to zero, and height:  0, visibility to hidden </p></div> <div id= "Sidel" ><p>left</p> <p> </p> < /div> </div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

To accommodate each browser, we also need to add the following code.

. wrapfix {Display:inline-table}
/* Hides from Ie-mac \*/
* HTML. Wrapfix {height:1%}
. wrapfix {Display:block}
/* End Hide from Ie-mac * *


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.