Feature: you do not need to add a clear DIV.
: After (pseudo object)-set the content after the object, which is usually used with content. IE does not support this pseudo object, not supported by Ie browsers, so it does not affect IE/WIN browsers.
CSS. wrapfix: after {
Content :".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
Set display: block; apply to: after element. Because the default value of display is "inline", the clear feature cannot be received, and the height of the clear container is set to zero, height: 0 ;, visibility is hidden. this is not cleared. non-Ie browsers cannot see the background and border of wrap.
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">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> clear floating -- 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;
Width: 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>
</Head>
<Body>
<Div class = "wrap">
<Div id = "sider">
<P> clear floating -- use: after </p>
<Em> This is a non-floating. Non-Ie
The browser cannot see the background and border of wrap. </em>
<P> Feature: You do not need to add a clear DIV. </p>
<P>: after (pseudo object) -- set the content after the object, which is usually used with content. IE does not support this pseudo object, not Ie
1st 2 3 pages
