float 及清除浮动

1. 浮动 float

官方描述：float 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，尽管仍然保持部分的流动性

通俗解释：指定一个元素，他只能浮动在当前容器里的左侧或者右侧，浮动元素不会影响当前容器里块级元素的布局，但会影响当前容器里文本元素和內联元素的布局

常见例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        .box {
            /*  200px;
            height: 800px; */
            border: 1px solid #000;
        }
        .width {
            width: 50px;
            height: 50px;
        }
        .box1 {
            background-color: aqua;
            float: left;
        }
        .box1::after {
            clear: both;
            content: '';
        }
        .box2 {
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1 width"></div>
        <div class="box2 width"></div>
        <div>As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</div>
    </div>
</body>
</html>

2. 清除浮动 clear

官方描述：clear属性指定一个元素，是否必须移动 (清除浮动后) 到他之前的浮动元素下边。

　　　　他之前的浮动元素指的是指定元素所在的块级格式化上下文（BFC）里面的前置浮动元素。指定的元素必须是块级元素，或者将其display设置成block

通俗解释：就是说将一个容器里面的某一个块级元素设置clear属性，将其移动到该块级元素前边浮动的元素下边

浮动产生的问题：

　　1. 如果一个父元素只有一个浮动元素，并且这个浮动元素的高度大于父元素的高度，父元素不会自动伸展来包含这个浮动元素，会出现父元素“高度塌陷”的现象

　　2. 一个父元素下边有多个块级元素，其中一个元素是浮动的，希望其他几个可以移动到浮动元素的下边等

第一个问题现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        .box {
            border: 1px solid #000;
        }
        .width {
            width: 50px;
            height: 50px;
        }
        .box1 {
            background-color: aqua;
            float: left;
        }
        .box2 {
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1 width"></div>
        <div class="box2 width"></div>
    </div>
</body>
</html>

第二个问题现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        .box {
            border: 1px solid #000;
        }
        .width {
            width: 50px;
            height: 50px;
        }
        .box1 {
            background-color: aqua;
            float: left;
        }
        .box2 {
            background-color: blue;
            float: right;
        }
        .box3 {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1 width"></div>
        <div class="box3 width"></div>
        <div class="box2 width"></div>
    </div>
</body>
</html>

解决方案：

　　1. 父元素的伪元素设置clear: both/left/right

　　2. 添加额外的标签，并将其设置clear: both/left/right

　　3. 使用br标签，br 有 clear=“all | left | right | none” 属性

相关阅读:
js sort方法根据数组中对象的某一个属性值进行排序
 JS中数据类型转换
 DOM盒子模型常用属性client，offset和scroll
Vue之render渲染函数和JSX的应用
 北漂程序员的真实奋斗史：有辛酸，更有成长
 比高房价更可怕的是，35岁以后你还能干嘛？
Vue组件间通信方式
 根据对象的某个属性名的值从新排序
 JS隐藏号码中间4位
 javascript之揭示模式
原文地址：https://www.cnblogs.com/yyh1/p/16387438.html

float 及 清除浮动

float 及清除浮动