清除浮动

作者: web_jianshu | 来源:发表于2020-07-22 08:54 被阅读0次

11.22 前端学习
前端06
06 前端学习
清除浮动
技术知识点整理
H5前端开发学习笔记——0x15清除浮动
css清除浮动
CSS清除浮动三种方式
布局浮动的问题
清除浮动

２.1 文档流    
※块元素独占一行
※行内元素在一行上显示
※自上而下

２.2 浮动(float)
用法:float:left|right
特点：
浮动起来
不占位置（脱标）
如果多个盒子都使用了浮动，会在一行上显示。
给行内元素使用浮动，可将行内元素转换成行内块。
尽量用display转换行内块。
作用：
※文本绕图
※制作导航栏
※网页布局

２.3 清除浮动
※清除不是删除浮动
※清除浮动是清除浮动产生的不良影响。
注意:不给外边的父盒子设置高度时，里边的子盒子浮动时，会让页面页面布局产生混乱。
方法：clear:left|right|both
  使用最多的是clear:both;

未清除浮动前

未清除浮动前

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .header,
      .main,
      .footer {
        width: 500px;
      }

      .header,
      .footer {
        height: 100px;
        background: #000;
      }

      .main {
        background: #eee;
        margin: 10px 0;
        /* 方案2: 在外边的父盒子上使用：overflow:hidden; */
        /* overflow: hidden; */
      }

      .content {
        width: 300px;
        height: 300px;
        background: orange;
        float: left;
        /* margin-top: -100px; */
      }
      .sidebar {
        width: 190px;
        height: 300px;
        background: green;
        float: right;
      }

      /* 方案3: 伪元素清除浮动(与额外标签法原理一致) */
      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both;
      }
      /*兼容ie浏览器*/
      .clearfix {
        zoom: 1;
      }
    </style>
  </head>
  <body>
    <div class="header"></div>
    <div class="main clearfix">
      <div class="content"></div>
      <div class="sidebar"></div>

      <!-- 方案1: 额外标签法 在浮动元素后边加一个标签，清除浮动。 -->
      <!-- <div style="clear:both;"></div> -->
    </div>
    <div class="footer"></div>
  </body>
</html>

清除浮动后

清除浮动后