原理

文字环绕图片
浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框
浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局
此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式
当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”
同处于文档流中的文字实体不会与浮动元素重叠

特点

包裹性

相当于 inline-block 效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动</title>
    <style>
      .btn1 {
        display: inline-block;
        background: #40a9ff;
        padding-left: 3px;
        color: #000000;
        font-size: 12px;
        text-decoration: none;
      }
      .btn1 cite {
        display: block;
        line-height: 26px;
        padding: 0 13px 0 10px;
        background: #40a9ff;
      }
      .btn2 {
        float: left;
        background: #40a9ff;
        padding-left: 3px;
        color: #000;
        font-size: 12px;
        text-decoration: none;
      }
      .btn2 cite {
        display: block;
        line-height: 26px;
        padding: 0 13px 0 10px;
        background: #40a9ff;
      }
    </style>
  </head>
  <body>
    <div>
      <a href="javascript:void(0);" class="btn1"
        ><cite>inline-block方法</cite></a
      >
    </div>
    <div>
      <a href="javascript:void(0);" class="btn2"><cite>float方法</cite></a>
    </div>
  </body>
</html>

破坏性

无 inline box -> 无 line boxs -> 无高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>破坏性</title>
    <style>
        img{
            float: left;
        }
    </style>
  </head>
  
  <body>
    <p>这是一行普通的文字，这里有个 <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.wangchao.net.cn%2Ffengjing%2F1327205317794.jpg&refer=http%3A%2F%2Fimage.wangchao.net.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631245865&t=b111a5128a8a66f1be8b078a0ef846c3" width="100px"> 图片。</p>
  </body>
</html>

布局

块级元素排列

清除浮动元素影响

清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

clear

元素盒子的边不能和前面的浮动元素相邻
抗浮动
块级元素

BFC

overflow + zoom
margin 负值定位或是负的绝对定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>清除浮动影响</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 300px;
        border: 1px solid #000;
      }
      .float {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        float: left;
      }
      .clear1 {
        /* BFC */
        overflow: hidden;
        zoom: 1;
      }
      .clear2 {
        zoom: 1;
      }
      .clear2:after {
        display: block;
        content: "";
        clear: both;
        line-height: 0;
        /* height:0; */
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container clear1">
      <div class="float"></div>
      <!-- <div style="clear:both;"></div> -->
    </div>
  </body>
</html>

CSS系列 - float

原理

特点

包裹性

破坏性

布局

清除浮动元素影响

clear

BFC