理解CSS浮动float

前言：虽然经常看到关于清除浮动的知识，然后感觉自己也都理解了~~但是其实还是半懂把。所以这次想写个文章详细的记录一下~，让自己懂的更透彻一些

首先，我们先看看浮动的特性：

浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要清除浮动元素，使其包含框表现出正常的高度。

这里放一个链接:https://www.jianshu.com/p/07eb19957991 我觉得这个博主真的写的太好了 ~~
所以我就只简单记录一下关于清除浮动的内容把！

方法一：在最后增加一个清除浮动的子元素（但是这样会增加一个DOM节点）

也可以在最后增加一个清除浮动的br：<br clear=”all” />。语义上会稍微好一些。但统同样会增加一个DOM节点

<div style="border:4px solid blue;">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
    <!-- 加上空白div节点来闭合浮动 -->
    <div style="clear:both;"></div>  
</div>
<div style="border:4px solid gray;">我是页脚</div>

效果展示:
在这里插入图片描述可以很明显看到，尽管浮动元素1和浮动元素2都设置了浮动属性，本来应该会出现高度塌陷的父元素却没有！！这是因为加上了空白div节点来闭合浮动。
如果没有加空白div呢会出现什么情况呢？
如图所示:
在这里插入图片描述
如果你觉得说可以用clear来清除浮动的话，那么我们在我是页脚的div块加上一个clear:left，看一下会发生什么情况呢~

如图所示，这时候页脚确实挤下来了，浮动元素的父元素div块仍然处于高度塌陷的情况，所以这种解决方法不美好~

方法二：父元素设置 overflow:hidden

<body>
  <div style="border:4px solid blue; width: 500px;overflow: hidden;">
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
  </div>
  <div style="border:4px solid gray; width: 500px;">我是页脚</div>
</body>

效果展示：

在这里插入图片描述
接下来的父元素指的是包裹两个浮动元素的div哈~
这里设置父元素overflow属性为hidden的原理我是理解成BFC布局规则中的第七条计算BFC的高度时，浮动元素也参与计算。由于父元素设置overflow:hidden。所以被触发为了一个BFC，所以在计算其高度时，浮动元素也参与了计算。所以父元素的高度就撑开了。
详情可参考我的另一篇文章：
理解BFC https://blog.csdn.net/qq_43553067/article/details/88739168
其实按这样理解的话，好像只要可以触发父元素为BFC的方法都可以清除浮动？
当我在父元素添加了属性 float:left后，发现
在这里插入图片描述
嗯？？？页脚的border-top居然没有了，这是为什么呢？
这是因为当父元素设置float后，脱离了标准流，而下一个div元素就会像当作她不存在一样进行定位。而此时页脚的div并没有设置height，所以height会随着wdith自动变化。这里可以动手去试一下~
当我增加页脚的div宽度时，我又有点疑惑
在这里插入图片描述尽管页脚div的高度有包括了整个父元素的高度，但是为什么我是页脚不能只能出现在父元素的框外面周围而不是里面呢？
为此我去查了一下浮动元素对于兄弟元素（非浮动）会产生怎样的影响

在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。

终于解开了我滴疑惑~知识果然都还是串在一起的，可以看看下面链接的文章，讲的是浮动元素的影响
https://www.w3cplus.com/css/float.html

方法三：用:after伪元素

<div style="border:4px solid blue;width: 500px;" class="clearfix" >
    <div style="width:200px;border:4px solid red;float:left;">
        我是浮动元素1
    </div>
    <div style="width:200px;border:4px solid yellow;float:left;">
        我是浮动元素2
    </div>
</div>
<div style="border:4px solid gray; width: 500px;">
  我是页脚  
</div>

<style>
    .clearfix:after {
      clear: both;
      content: ".";   
      display: block;
      height: 0;      /*高度为0且hidden让该文本彻底隐藏*/
      visibility: hidden;
    }
</style>

方法四: 父级div定义高度

该方法比较简单，但是缺点是只适合高度固定的布局，如果布局和父级div不一样，会产生问题。这里大家可以自己手动试一下，就会发现不止一些些麻烦拉。如果内部还是一个带有border的div的话！

总结这两次写文章都把自己的疑惑和思路都写进去了。虽然觉得啰啰嗦嗦和一点也不美观，但是觉得自己的疑惑最重要，要记录下来。还有知识真的都是串起来的！！！

方法一： 在最后增加一个清除浮动的子元素（但是这样会增加一个DOM节点）

方法二：父元素设置 overflow:hidden

方法三：用:after伪元素

方法四: 父级div定义高度

猜你喜欢

方法一：在最后增加一个清除浮动的子元素（但是这样会增加一个DOM节点）