Float

最新推荐文章于 2022-03-31 19:07:29 发布

EvaXUAN

最新推荐文章于 2022-03-31 19:07:29 发布

阅读量429

点赞数 1

分类专栏：浮动文章标签： class

本文链接：https://blog.csdn.net/taotaomin99/article/details/72330947

版权

浮动专栏收录该内容

0 篇文章 0 订阅

订阅专栏

从不同的方面来了解float：

浮动的本质

浮动就是个带有方位的 display:inline-block 属性。
display:inline-block 某种意义上的作用就是包裹 ,而浮动也有类似的效果。
而float 无法等同于 display:inline-block,其中原因之一就是浮动的方向性,display:inline-block 仅仅一个水平排列方向,就是从左往右,而 float 可以从右往左排列, 这就是两者的差异。

浮动的属性参数：

浮动拥有三个参数:none:对象不浮动,left:对象浮动到左边,right:对象浮动到右边。
(浮动的最初意义就是文本围绕图片。)

float的塌陷为题（清除浮动，比较完善的一种方法）

  .clearfix:before,
  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
     clear: both;
     zoom: 1;/* IE < 8 */
  }

一个关于文字环绕的demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        div{
            width:400px;
            height:400px;
            background-color: gray;
        }
        i{
            width:100px;
            height:100px;
            background-color: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <i></i>
        <p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>
    </div>
</body>
</html>

上面几处是我对浮动理解不充分地方的补充，前同事说“懂这个的话就比只知道怎么用的高几个level 了”，
原文出处
就酱，下班~~~