[CSS]深入浅出float

娜姐

发布于 2022-01-20 12:44:14

4640

发布于 2022-01-20 12:44:14

文章被收录于专栏：娜姐聊前端

float原本是用于“文字环绕元素”的效果，但是，平时我们经常在布局上用float属性。那么，使用float时，需要注意些什么呢？

1. float元素的表现

与绝对定位不同，float并没有使元素脱离文档流。
浮动元素在原文档流位置向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
文本和内联元素围绕浮动框排列。
块元素无视浮动框，按文档流定位。
包裹浮动框的父元素会忽略浮动框高度。

可见，有两点需要理解：一是浮动框本身如何浮动；二是，与浮动框毗邻的内联/块元素如何定位。

下面看几个例子：

Demo 1

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
    <style>
        #box1 {
            border: 5px solid blue;
        }

        #box2 {
            border: 3px solid green;
            background: lightgrey;
        }

        #box3 {
            float: right;
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box2">
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
    </div>
    <div id="box3">
    </div>
</div>
</body>
</html>

效果图：

float1.png

分析：浮动元素box3表现为脱离文档流，右浮动，浮动元素没有撑开父元素。

Demo 2

在Demo 1的基础上，交换box2和box3的位置。

<div id="box1">
    <div id="box3">
    </div>
    <div id="box2">
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
    </div>
</div>

效果图：

float2.png

可见，与浮动元素毗邻的块元素会忽视浮动元素定位，但是，块元素中的文本围绕浮动元素排列。

2. 清除浮动属性 clear

clear可以用于清除浮动，既可用于浮动框，也可用于非浮动元素。

参考mozilla的定义：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致[margin collapsing]不起作用。
当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

关键点在，应用了clear属性的元素，会移动到浮动元素的下方。

在Demo 2的基础上，做样式修改，将clear用在非浮动块上。

#box2 {
  border: 3px solid green;
  background: lightgrey;
  clear: both;
}

clear1.png

下一步，我们创建多个浮动块，尝试将clear应用在浮动块上。

多个浮动块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>location</title>
    <style>
        #box1 {
            border: 5px solid blue;
        }

        #box2 {
            border: 3px solid green;
            background: lightgrey;
        }

        #box3 {
            float: right;
            border: 2px solid red;
            width: 100px;
            height: 100px;
        }
        #box4 {
            float: left;
            border: 2px solid yellow;
            width: 120px;
            height: 120px;
        }
        #box5 {
            float: left;
            border: 2px solid purple;
            width: 150px;
            height: 150px;

        }
        #box6 {
            float: right;
            border: 2px solid brown;
            width: 110px;
            height: 110px;
        }
    </style>
</head>
<body>
<div id="box1">
    <div id="box3">
        box 3
    </div>
    <div id="box2">
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
        这是一段文本；这是一段文本；这是一段文本；这是一段文本；这是一段文本；
    </div>
    <div id="box4">box 4</div>
    <div id="box5">box 5</div>
    <div id="box6">box 6</div>
</div>
</body>
</html>

float3.png

在box 5上应用清除浮动，首先清除左浮动：clear: left;，这时，box 5移动到左浮动元素box 4的下面，在以float:left方式向左浮动。

#box5 {
  float: left;
  border: 2px solid purple;
  width: 150px;
  height: 150px;
  clear: left; /*清除左浮动*/
}

clear float 1.png

如果在box 5清除右浮动：clear: right;，那么，它会移动到右浮动元素box 3的下面，再以float:left方式向左浮动。

#box5 {
  float: left;
  border: 2px solid purple;
  width: 150px;
  height: 150px;
  clear: right; /*清除右浮动*/
}

clear float 2.png

3. 如何解决浮动导致的父元素高度塌陷？

由于浮动元素不会撑开父元素高度，所以视觉上造成父元素塌陷的效果。那么，有如下常见的解决方案：

<div id="box" class="clear">
    <div id="child">a float box</div>
    <div id="blank"></div>
</div>

<style>
body {
    padding: 100px;
}

#box {
    border: 2px solid red;
}

#child {
    float: left;
    width: 100px;
    height: 100px;
    border: 2px solid green;
}
/*方法一*/
.clear {
    overflow: hidden;
}
/*方法二*/
.clear:after {
    display: block;
    content: '';
    clear: both;
}
/*方法二*/
#blank {
  clear: both;
}
</style>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.07.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

mozilla