关于CSS深入理解float浮动，float且用且珍惜

落日映苍穹つ 2022-03-15 15:52 315阅读 0赞

今天很高兴为大家分享一下，关于深入理解float的那些二三事~

首先关于float浮动的问题，大家还是要知道一点点它的历史，这对之后深入理解float很重要。

其实当初写float出来的人，他的本意到底是什么？

其实float的设计初衷就仅仅只是，完全的实现一种文字环绕的效果而已，具体如下图所示~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70][]

大家都知道浮动是具有破坏性，会让父元素高度塔下崩塌，看着也是挺惨的。所以又要提到最开始说的，浮动的破坏性只是拿来实现文字环绕效果的。那么我现在给大家看下主流的清楚浮动的方法————

--------------------

使用伪元素来清除这该死的浮动(:after注意：作用于浮动元素的父元素）

.clearfix:after{
        content:"";/*设置内容为空*/
        height:0;/*高度为0*/
        line-height:0;/*行高为0*/
        display:block;/*将文本转为块级元素*/
        visibility:hidden;/*将元素隐藏*/
        clear:both;/*清除浮动*/
    }
    .clearfix{
        zoom:1;/*为了兼容IE*/
    }
    <div class="box clearfix">
        <div class="lol">0000</div>
        <div class="mad">00000</div>
        <div class="hape">000000</div>
    </div>
    </body>

使用双伪元素清除浮动——————无需额外的标签，浏览器兼容性好，是目前用的最多的一种清除浮动的方法之一

.clearfix:before,.clearfix:after {
         content: "";
         display: block;
         clear: both;
    }
    .clearfix {
         zoom: 1;
     }

顺带一提，现在clearfix现在已经沦落到了滥用的地步。现在很多网站基本上每层元素上每层标签上，大家要明白.clearfix只能应用在包含浮动的父元素上。乱入的haslayout是会让IE6/IE7做出一些崩坏的事情。

## 浮动是魔鬼，一塌两行泪。 ##

直接的浮动是会导致————

1.  使元素block块状化（砖头化）
2.  破坏性造成的紧密排列特性（去控格化）

搬砖式布局，只会导致之后容错性比较糟糕，容易出现问题。并且这种布局需要元素固定尺寸，是很难重复使用。在很多的低版本IE下只能欲哭无泪了。

咳咳咳~那么干货来了啊，针对这种搬砖式的直接浮动，我们可以使用这种方法，来减少崩坏的可能。

## 浮动的流体布局 ##

### 文字环绕模式（左浮动—中间内容—右浮动） ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 1][]

### 单侧固定（width+float） ###

唉，懒了不想打了- -简单描述下。举个栗子~

固定左侧，右侧内容自适应。

### 两侧皆自适应的流体布局 ###

下面丢一串代码，自己体会~

display: table-cell; *display: inline-block; *width: auto;

最后再说一句，合理使用浮动，且用且珍惜。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70]: /images/20220315/75c481fa882440abb7ee6d976cd0bcb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDMwOTAxOQ_size_16_color_FFFFFF_t_70 1]: /images/20220315/14ad70ee206c4691abc73cfb1bc24432.png