CSS float浮动详解

最新推荐文章于 2024-05-05 20:21:31 发布

木习习C

最新推荐文章于 2024-05-05 20:21:31 发布

阅读量799

点赞数

文章标签：前端 css 浮动 css float

本文链接：https://blog.csdn.net/weixin_41459434/article/details/94600580

版权

整理一些对于float的理解

一、float的定位方式

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

同样是脱离正常的文档流，float和absolute还是有区别的，float定位的元素允许文本和内联元素环绕它。
像下面这个例子:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="all">
        <div class="floatBlock">浮动区域</div>
        <p>123456789123456789123456789123456789123456789123456789123456789123456789</p>
    </div>
</body>
<style>
    .all {
        width: 300px;
        height: 300px;
        background-color: aquamarine;
        word-wrap: break-word;
    }

    .floatBlock {
        width: 100px;
        height: 100px;
        background-color: antiquewhite;
        float: left;
    }
</style>
</html>

二、float的影响

包裹性

float会让元素的display变成inline-block。

比如一个div未设置width时，默认宽度是100%。在设置了float后，宽度会变为起子元素撑开的宽度。
又比如一个span元素，在设置了float后，width、height等属性会开始对其生效。

破坏性

因为float脱离了正常的文档流，所以可能会引发高度塌陷。

三、清除浮动的方法

使用伪元素:after

.cl:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
}

在浮动元素的后一个元素上添加clear:both;或者在后面加一个空元素，再加上clear:both;
在浮动元素的父元素上加上overflow属性,原理主要是BFC。

可能遇到的问题

方法一和方法二其实是同理的，大多数情况也都是使用方法一，但特点情况下使用clear:both会出现一问题。
直接举例:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div class="div1">
        div1
    </div>
    <div class="div2">
        <div style="float:left">div2浮动文字</div>
        <div style="clear:both"></div>
    </div>
</body>
<style>
    *{
        padding: 0;
        margin:0;
    }
    .div1{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #4CAF50;
    }
    .div2{
        margin-left:100px;
        background-color: aqua;
    }
</style>
</html>

可以看到div2中清除了浮动，预想的结果是div2的高度应该和其浮动的子元素文字一样高，但实际情况是div2的高度随着div1的高度在变化。

查阅clear的文档可以发现：

When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats.

当clear应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。

也就是说div2中那个添加了clear:both;的子元素会移至左右浮动元素的下方，也就浮动的div1下方，所以这个空元素撑开了div2的高度。
这种情况的解决方法也很简单，让div2形成一个新的BFC就行了，clear清除浮动对于其他形成BFC的块内部的浮动元素是无效的。

BFC相关之前整理过，可参考BFC（Block Formatting Context）块级格式化上下文。

木习习C

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS float浮动详解

整理一些对于float的理解一、float的定位方式当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。同样是脱离正常的文档流，float和absolute还是有区别的，float定位的元素允许文本和内联元素环绕它。像下面这个例子:<!DOCTYPE html><html lang="...
复制链接

扫一扫