概念
浮动布局简介:当元素浮动以后可以向左或向右移动,直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流,所以文档的普通流中的框就变现的好像浮动元素不存在一样。
优点
类似于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;
/* width: 400px; */
/* height: 400px; */
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;
/* width: 400px; */
/* height: 400px; */
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;
/* width: 400px; */
/* height: 400px; */
background-color: khaki;
}
.a {
background-color: cornsilk;
float: left;
}
.b {
background-color: lavenderblush;
float: right;
}
#app::after {
/* 设置添加子元素的内容是空 */
content: '';
/* 设置添加子元素为块级元素 */
display: block;
/* 设置添加的子元素的高度0 */
/* height: 0; */
/* 设置添加子元素看不见 */
/* visibility: hidden; */
/* 设置clear:both */
clear: both;
}
</style>
</html>