六、清除浮动¶

TIP

清除浮动：浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响

1、清除浮动方法 1¶

TIP

让内部有浮动的父盒子形成 BFC，它就能关闭住内部的浮动。此时，最好的方法就是 overflow: hidden; 属性

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    /* 
        清除浮动方法1：
        让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动
        此时，最好的方法就是 overflow: hidden; 属性
      */
    overflow: hidden;
    margin-bottom: 10px;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }
</style>

<body>
  <div>
    <p></p>
    <p></p>
  </div>

  <div>
    <p></p>
    <p></p>
  </div>
</body>

![[Pasted image 20260228115653.png]]

2、清除浮动方法 2¶

TIP

给后面的父盒子设置 clear: both; 属性 clear 表示清除浮动对自己的影响，both 表示左右浮动都清除该方法不推荐

3、清除浮动方法 3¶

TIP

使用 ::after伪元素给盒子添加最后一个子元素将 ::after 设置 content: ""; 属性，让其成为一个块级元素 display: block; 并且给 ::after 设置 clear:both; 强烈推荐使用，最佳实践（大厂都这么用）

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    border: 2px solid red;
    margin-bottom: 20px;
  }

  /* 
      添加伪元素
      ::after 匹配选中的元素的最后一个子元素
    */
  .clearfix::after {
    content: "";
    clear: both;
    /* 转为块级元素 */
    display: block;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }
</style>

<body>
  <div class="clearfix">
    <p></p>
    <p></p>
  </div>

  <div class="clearfix">
    <p></p>
    <p></p>
  </div>
</body>

![[Pasted image 20260228115743.png]]

4、清除浮动方法 4¶

TIP

在两个父盒子之间 "隔墙" 隔一个携带 clear: both;的盒子不推荐

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    border: 2px solid red;
  }

  p {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin-right: 10px;
    float: left;
  }

  /* 
      清除浮动方法4：
      在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子
    */
  .cl {
    clear: both;
  }

  .h20 {
    height: 20px;
  }
</style>

<body>
  <div>
    <p></p>
    <p></p>
  </div>

  <!-- 在两个父盒子之间 "隔墙" 隔一个携带 `clear: both;`的盒子 -->
  <div class="cl h20"></div>

  <div>
    <p></p>
    <p></p>
  </div>
</body>

![[Pasted image 20260228115823.png]]

七、浮动实战应用¶

TIP

浮动的元素一般都会在其外面套一个标准流父级搭配一起使用。这样就能约束浮动元素的位置，使其只能在父元素的盒子范围内排列显示。

1、实现左右两列式布局¶

![[Pasted image 20260228115906.png]]

<style>
  .box {
    width: 600px;
    background-color: khaki;
    padding: 10px;
  }
  .box .left {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    float: left;
  }
  .box .right {
    width: 380px;
    height: 200px;
    background-color: pink;
    float: right;
  }
  /*清除浮动*/
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
</style>
<body>
  <div class="box clearfix">
    <div class="left">左</div>
    <div class="right">右</div>
  </div>
</body>

2、实现一行多列式布局¶

![[Pasted image 20260228115949.png]]

<style>
  .box {
    width: 600px;
    background-color: khaki;
    padding: 10px;
  }
  .box .left {
    width: 150px;
    height: 200px;
    background-color: skyblue;
    float: left;
  }
  .box .middle {
    width: 280px;
    background-color: aquamarine;
    height: 200px;
    float: left;
    margin-left: 10px;
  }
  .box .right {
    width: 150px;
    height: 200px;
    background-color: pink;
    float: right;
  }
  /*清除浮动*/
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
</style>
<body>
  <div class="box clearfix">
    <div class="left">左</div>
    <div class="middle">右</div>
    <div class="right">右</div>
  </div>
</body>

3、三列式布局，中间自适应¶

![[Pasted image 20260228120032.png]]

<style>
  body {
    margin: 0;
  }
  .box {
    width: 100%;
    background-color: khaki;
    padding: 10px;
    box-sizing: border-box;
  }
  .box .left {
    width: 150px;
    height: 200px;
    background-color: skyblue;
    float: left;
  }
  .box .middle {
    background-color: aquamarine;
    height: 200px;
    margin: 0px 160px;
  }
  .box .right {
    width: 150px;
    height: 200px;
    background-color: pink;
    float: right;
  }
  /*清除浮动*/
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
</style>
<body>
  <div class="box clearfix">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中</div>
  </div>
</body>

4、多行多列式布局¶

![[Pasted image 20260228120116.png]]

<style>
  .container {
    width: 800px;
    background-color: skyblue;
    margin: 0px auto;
    padding: 5px;
  }
  .item {
    width: 190px;
    height: 200px;
    background-color: khaki;
    float: left;
    margin: 5px;
  }
  /*清除浮动*/
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
</style>
<body>
  <div class="container clearfix">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
  </div>
</body>

5、实现整站结构布局¶

![[Pasted image 20260228120153.png]]

<style>
  body,
  ul {
    margin: 0;
  }
  ul {
    padding: 0;
    list-style: none;
  }
  .clearfix::after {
    display: block;
    content: "";
    clear: both;
  }
  .top {
    height: 50px;
    background-color: skyblue;
  }
  .container {
    width: 1000px;
    margin: 10px auto;
  }
  /*header部分样式*/
  .container .header .logo {
    width: 100px;
    height: 120px;
    background-color: pink;
    float: left;
  }
  .container .header .nav {
    width: 700px;
    float: right;
  }
  .nav .nav-top {
    width: 500px;
    height: 50px;
    background-color: turquoise;
    float: right;
  }
  .nav .nav-bottom {
    height: 60px;
    width: 100%;
    background-color: tomato;
    float: right;
    margin-top: 10px;
  }
  /*main-top部分样式*/
  .main {
    margin-top: 20px;
  }
  .main-top .main-top-menu {
    width: 200px;
    height: 500px;
    background-color: lavender;
    float: left;
  }
  .main-top .main-top-content {
    width: 520px;
    height: 500px;

    float: left;
    margin-left: 15px;
  }
  .main-top .main-top-recommend {
    width: 250px;
    height: 500px;
    background-color: orange;
    float: right;
  }
  .main-top-content .top-content-banner {
    height: 300px;
    background-color: tomato;
  }
  .main-top-content .top-content-hot {
    height: 180px;
    margin-top: 20px;
  }
  .top-content-hot ul li {
    width: 120px;
    height: 180px;
    background-color: aquamarine;
    margin: 0px 5px;
    float: left;
  }
  .footer {
    height: 100px;
    background-color: #ddd;
  }
</style>
<body>
  <div class="top"></div>
  <div class="container">
    <!--header start-->
    <div class="header clearfix">
      <div class="logo"></div>
      <div class="nav clearfix">
        <div class="nav-top"></div>
        <div class="nav-bottom"></div>
      </div>
    </div>
    <!--header end-->
    <!--main start-->
    <div class="main">
      <div class="main-top clearfix">
        <div class="main-top-menu"></div>
        <div class="main-top-content">
          <div class="top-content-banner"></div>
          <div class="top-content-hot">
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <li>4</li>
            </ul>
          </div>
        </div>
        <div class="main-top-recommend"></div>
      </div>
    </div>
    <!--main start-->
  </div>
  <div class="footer"></div>
</body>