一、什么是浮动

浮动最初始是为了做图文环绕效果

浮动的目的：让元素横向排列，也可以做多行排列效果
语法：float:none/left/right;
浮动停止的条件：碰到父元素边缘、碰到浮动元素
元素浮动后会脱离文档流，不占空间，所以会出现元素补位置和父元素高度塌陷的情况
- 浮动原理

无标题.png

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1,.box2 {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: red;
            float: right;
        }
        .box2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

注意：浮动元素一定要包裹一个容器，并且该容器有不能有高度塌陷。而且横向排列效果，建议将所有子元素都浮动起来。

二、清除浮动
clear:left/right/both;
元素一旦浮动，独占一行(和父元素等宽)的特性就消失了,宽度如果不设置就会和内容适配

清除浮动-聊天对话框.png

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dialog {
            width: 500px;
            height: 700px;
            border: 2px dashed #000;
        }
        .friend {
            background-color: #ddd;
        }
        .self {
            background-color: greenyellow;
        }
        .dialog p {
            margin-top: 20px;
            clear: both;
            max-width: 320px;
        }
        .friend {
            float: left;
        }
        .self {
            float: right;
        }
    </style>
</head>
<body>
    <div class="dialog">
        <p class="friend">老板有货么？</p>
        <p class="self">有！！！</p>
        <p class="friend">这么凶！！！态度不够诚恳</p>
        <p class="self">
            我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你
        </p>
        <p class="self">态度够诚恳了吧</p>
        <p class="friend">老板，你这有点吓人啊？</p>
        <p class="friend">再见？</p>
        <p class="self">纳尼？</p>
        <p class="self">。。。</p>
    </div>
</body>
</html>

补充
- 最大宽度max-width
- 最小宽度min-width
- 最大高度max-height
- 最小高度min-height
  三、伪元素选择器

添加文本

:before{
  content:"添加的文本1";
}
:after{
  content:"添加的文本2";
}

添加图片

:before{
  content:url(./images/link1.png);
}
:after{
  content:url(./images/link2.png);
}

添加元素(给容器添加一个子元素)

before相当于添加一个大儿子，after相当于添加一个小儿子

:before{
content:"";
display:block;
}
:after{
content:""; /*这个不能删掉*/
display:block; /*伪元素选择器添加的元素无法设置尺寸，需要转成块级元素*/
}

<!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>Document</title>
<style>
   .wrap {
       width: 600px;
       border: 2px solid #000;
   }
   .box {
       width: 400px;
       height: 400px;
       background-color: red;
   }
   .wrap::before {
       content: "";
       display: block;
       width: 100px;
       height: 100px;
       background-color: pink;
   }
   .wrap::after {
       content: "";
       display: block;
       width: 100px;
       height: 100px;
       background-color: green;
   }
</style>
</head>
<body>
<div class="wrap">
   <div class="box"></div>
</div>
</body>
</html>

伪元素添加元素与html标签直接添加有什么优势
- 伪元素是伪的，虽然它们可以被浏览器渲染引擎识别并正确渲染，然而伪元素本身并不是DOM元素，所以无法被js直接操作，可以用伪元素制造视觉上的效果，但是不会增加js查DOM的负担，他对js是透明的，不是一个实际的html标签，可以加快浏览器加载html文件，对SEO也有帮助
- 伪元素一般用于画图，特别是那种无关紧要的分隔线，点之类的小元素
- 伪元素重点还应用用于清除浮动
  四、解决父元素高度塌陷

方法一：父容器固定高度包裹住所有子元素
方法二：父容器设置overflow:hidden;
- 原理是父容器设置了改属性后，子元素的高度参与计算，具体原理即BFC（块级格式化上下文）

方法三：万能清除浮动法

父元素设置如下代码

.clear-fix::after {
content:""; /*这段不能删除*/
display:block; /*将元素转成块级元素，必须添加*/
clear:both; /*伪元素清除浮动*/
}

五、简单使用外边距margin

上外边距 margin-top
下外边距 margin-bottom
左外边距 margin-left
右外边距 margin-right

六、练习
写 CSS 样式第一步应该清除所有元素的默认样式 ```css / 所有元素内外边距清零 /

{ margin: 0; padding: 0; } / 所有的列表标识符去掉 / li { list-style:none; } / img去掉基线对齐 / img { vertical-align: middle; } / 超链接去掉下划线 / a { text-decoration: none; } /万能清除浮动法/ .clear-fix::after { content:””; display:block; clear:both; } ```

i 老师-HTML与CSS知识文档

08 - 浮动

一、什么是浮动

二、清除浮动

三、伪元素选择器

四、解决父元素高度塌陷

五、简单使用外边距margin

六、练习