浮动 - 前端分享 - SegmentFault 思否

最近在学浮动的知识，下面总结了一些浮动的一些特征

1. 块级元素浮动将并排显示，不再独占一行

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box2"></div>
    <div class="box2"></div>
</body>
</html>

效果：

修改：

<style>
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: skyblue;
            float: left;/*新增*/
        }
</style>

修改效果：

2. 内联样式浮动就可以设置宽高，不仅能够支持margin-left(right)，而且也支持margin-top(bottom)

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box2{
            width: 20px;/*无效*/
            height: 70px;/*无效*/
            border: 1px solid #ccc;
            margin-top: 20px;/*无效*/
            padding: 100px 30px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <span class="box2"></span>
    <span class="box2"></span>
</body>
</html>

效果：

修改：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box2{
            width: 20px;/*生效*/
            height: 70px;/*生效*/
            border: 1px solid #ccc;
            margin-top: 20px;/*生效*/
            padding: 100px 30px;
            background-color: skyblue;
            float: left;/*新增*/
        }
</style>

修改效果：

3. 浮动元素脱离正常的文档流,普通元素会占据浮动元素的位置

从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。

4. 浮动会导致父元素高度坍塌

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="border: solid 5px #0e0; width:300px;">
        <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
        </div>
        <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
        </div>
    </div>
</body>
</html>

效果：

如上图所示，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度，导致父元素高度坍塌。

浮动元素对父元素的影响

对父容器若子元素都是浮动元素，则无法撑开父元素高度，父元素失去高度。

浮动元素其他浮动元素的影响

对其他浮动元素，如果包含块太窄，无法完全水平容纳浮动元素，那么其他浮动元素就会向下移动，直到有足够空间。如果浮动元素高度不同，那么向下移动时可能会被卡住。

示例代码1（块太窄，向下移动）：

<div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 100px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
</div>

效果：

示例代码2（卡住）:

<div style="border: solid 5px #0e0; width:250px;">
      <div style="height: 120px; width: 100px; background-color: Red;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Green;  float:left;">
      </div>
      <div style="height: 100px; width: 100px; background-color: Yellow;  float:left;">
      </div>
</div>

效果：

浮动元素对普通元素的影响

普通元素会表现得当作浮动元素不存在一样，浮动元素可以覆盖普通元素，如果宽高合适，普通元素可以占据浮动元素原来的位置

对文字的影响

文字(既inline-level)级的元素会环绕浮动元素，表现的像是察觉到浮动元素一样。

浮动

Moorez

引用和评论

React 16.8.6 版本存在内存泄露

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制