提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[CSS3]Clearfix

css3
2023-09-14 09:00:56 时间 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css" />
</head>
<div class="db group"> <!-- 在含有float的容器中家group class-->
    <div id="l" style="width:100px; height: 100px; background: red;"></div>
    <p>to left</p>
</div>
<div id="c">
    <div  style="width:100px; height: 100px; background: blue;"></div>
    <p>Not float</p>
</div>
</html>
#l{
    float:left;
}
#c{
    border: 1px solid yellow;
}
.db{
    border: 1px solid aqua;
}

.group:before,
.group:after{
    content: "";
    display: table;
}
.group:after{
    clear: both;
}
.group{
    zoom: 1;
}

 

-----------------------Ex-----------------------

<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section class="content home group">
      <aside>
        <p>Did you know that Sven's Snowshoe Emporium produces the highest quality snowshoes in North America? <a href="#">Find out more</a>.</p>
      </aside>
      <article>
        <h3>New Fall Styles</h3>
        <p>Be the first at your resort to sport the hot new tennis-themed snow kicks, now available in the <a href="#">store</a>.</p>
      </article>
    </section>
  </body>
</html>

 

nav li {
  float: left;
}
aside {
  float: right;
  width: 120px;
}
article {
  float: left;
  width: 120px;
}

/* clearfix */
  
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
}

 

相关文章