概念
浮动布局简介:当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。
优点
类似于inline-block 区别： 第一个：就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的； 第二个：就是inline-block在使用时有时会有空白间隙的问题
缺点
最明显的缺点就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素的高度塌陷
解决 清除浮动
添加额外标签
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
</head
>
<body
>
<div id
='app'>
<div
class="a">aaaa
</div
>
<div
class="b">bbbb
</div
>
<div style
="clear: both;"></div
>
</div
>
</body
>
<style
>
#app
{
position
: relative
;
background
-color
:khaki
;
}
.a
{
background
-color
: cornsilk
;
float
: left
;
}
.b
{
background
-color
:lavenderblush
;
float
: right
;
}
</style
>
</html
>
父级添加overflow属性，或者设置高度
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
</head
>
<body
>
<div id
='app'>
<div
class="a">aaaa
</div
>
<div
class="b">bbbb
</div
>
</div
>
</body
>
<style
>
#app
{
position
: relative
;
background
-color
:khaki
;
overflow
: hidden
;
}
.a
{
background
-color
: cornsilk
;
float
: left
;
}
.b
{
background
-color
:lavenderblush
;
float
: right
;
}
</style
>
</html
>
建立伪类选择器清除浮动（推荐）
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
</head
>
<body
>
<div id
='app'>
<div
class="a">aaaa
</div
>
<div
class="b">bbbb
</div
>
</div
>
</body
>
<style
>
#app
{
position
: relative
;
background
-color
: khaki
;
}
.a
{
background
-color
: cornsilk
;
float
: left
;
}
.b
{
background
-color
: lavenderblush
;
float
: right
;
}
#app
::after
{
content
: '';
display
: block
;
clear
: both
;
}
</style
>
</html
>
