1、浮动的来历（有什么不对的下面评论或者私信我谢谢）

正常页面流：

- 在css中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流
- 但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段

浮动的来历：

- float设计的初始想法仅仅是为了做文字环绕图片
- 在目前开发中，很多的元素都是一个个的float堆叠起来的，但是这种布局及其容易崩溃
- 只要高度和宽度发生一点变化，页面都可能发生错乱
2、浮动
float属性：

- 左浮动（left）：让元素沿着容器左侧放置float: left;
- 右浮动（right）：让元素沿着容器右侧放置float: right
- none：不浮动float: none
4、脱离文档流
设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。
由于浮动这种特性，导致本属于普通流的元素设置浮动后，如果父级不存在其他普通流元素，父级的高度就会为0，如果父级存在其他普通流的元素，父级的高度也会受影响

5、清除浮动

浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来
高度塌陷：

- 浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度
- 父级的兄弟元素是按照父级的位置进行布局的，所以页面会乱掉

清除浮动：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响
清除浮动的方法：

1. 给浮动元素的父级设置高度height（不推荐使用）缺点：很多情况下高度都是不缺定的所有不适用
2. 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局
3. br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为both缺点：增加不必要的元素，不符合样式与结构相分离的要求
4. clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both；缺点：增加额外的结构，不符合语义化标准
5. after伪元素清浮动（推荐）可以给所有浮动元素的父级一个 clearFix的类名当一个元素需要清除浮动的时候直接设置clearFix类名即可
6. overflow：hidden；给父级设置，原理也是开启BFC（可以使用）优点：简单快捷；缺点：元素超出的时候，会隐藏超出部分

浮动的特点和问题解析

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
/* 沿着父级容器从左到右排列 */
float: left;
/* 沿着父级容器从右到左排列 */
float: right;
/* 不开启浮动 */
float: none;
/*
特点：
+ 脱离普通文档流（飘起来，不占位置）
+ 排列的位置是针对父级
+ 如果块级元素，宽度不写，原本会撑满父级，但是开了浮动后，宽度由内容撑开
+ 行内元素宽高是由内容撑开，不能设置宽高,设置浮动后就会生效
*/
}
span {
float: left;
width: 100px;
height: 100px;
background-color: lightseagreen;
}
.outer {
width: 700px;
heiht: 400px;
border: 10px solid lightcoral;

}
.outer>div {
/* width: 150px; */
height: 150px;
}
.inner1 {
background-color: lightblue;
float: left;
}


.outer>.inner2 {

background-color: lightseagreen;
}
</style>
</head>

<body>
<div class="outer">
<span></span>
<!-- <div class="inner1">11111</div> -->
<!-- <div class="inner2"></div> -->
</div>
</body>


</html>

浮动

1、浮动的来历（有什么不对的下面评论或者私信我谢谢）

2、浮动

4、脱离文档流

5、清除浮动

浮动的特点和问题解析