[CSS3]Clearfix-优快云博客

本文详细介绍了如何使用CSS实现元素的浮动布局，并通过clearfix解决浮动带来的布局问题。提供了具体的HTML和CSS代码示例，展示了如何使导航栏项水平排列及在内容区域中正确布局侧边栏和主要内容。

<!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;
}