1.浮动原理
多个盒子的布局
2.多个盒子布局的种类
2.1普通流布局(标准流布局)
按照默认的方式排列
2.2浮动布局
转换为行内块元素,但是却很难把空白缝隙去掉
2.3定位布局
2.4元素类型的转换
display:block;块级元素
display:inline;行内元素
display:inline-block;行内块元素
块级元素:{div、hr、p、h1~h6、ul、ol、from、table、...}独占一行,自上而下排列、能够识别宽高,margin和padding都有效,自动换行
行内元素:{span、a、i、em、...}从左到右,碰到父元素边框自动换行、宽高无效,margin左右有效,上下无效,padding上下左右都有效,不会自动换行
行内块元素:不自动换行、从左到右排列、能够识别宽高{块级元素添加display:inline-block}
3.浮动
3.1应用场景:
多个块级元素一行排列
3.2浮动定义:
float:left; 左浮动
float:none;不浮动
floatLright;右浮动
浮动一般使用float属性,将其移动到一边,直到左边缘或者右边缘直到包块框或另一个浮动框的边框
3.3浮动解决缝隙
添加float属性,可以让块级元素在一行显示,并且不像inline-block让块级元素变成行内块元素会有空隙
3.4浮动的特点:
3.4.1.浮动的盒子会脱离标准流
1.脱离标准普通流的控制移动到制定的位置(专业术语:脱标)
2.浮动的盒子不再保留原来的位置
背景挤走,文本等后边显示
相同大小或宽度相同,会挤到下一行
3.4.2浮动元素会具有行内块元素的特性
添加浮动元素后会让行内元素出现宽高属性的显示
3.4.3块级元素添加浮动效果
块级元素不添加宽度,会默认父级元素的宽度,添加float属性后为文本长度
3.4.4浮动的盒子只会影响后面的标准流,不会影响前面的标准流
左浮动,右浮动,都会空出属于标准行的空间
3.5浮动的问题及解决:
浮动的父元素塌陷
<!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 type="text/css">
.father{
border: 2px red solid;
width: 700px;
margin: 0 auto;
}
#one{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
#two{
width: 300px;
height: 300px;
background-color: burlywood;
float: left;
}
#brother{
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father clear">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="brother"></div>
</body>
</html>
浮动不占位置,父元素没有指定高度,会坍塌
解决:
1.在最后添加一个空标签,设置clear:both;此时清除左右浮动,父元素被子元素撑开,不会塌陷(父级元素添加高度会降低可拓展性)
#clear{
clear: both;
}
2.给父级元素添加overflow属性
#father{
overflow:hidden;
}
3.给父级元素添加一个伪元素after
.clear:after{
content: "";
display: block;
height: 0;
clear: both;
}
纯css实现
解决塌陷: