一、css-常用布局方法
1. float
- 元素“浮动”
- 脱离文档流
- 但不脱离文本流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
.container {
background: red;
width: 400px;
}
.p1 {
background: green;
float: left;
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="container">
<span class="p1">
float
</span>
<div class="p2">
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
</div>
</div>
</body>
</html>
从图中,我们可以看出,明显的浮动效果,不会影响父元素的布局,但是会影响兄弟元素文字的排版。同样的,我们还可以看到float会对自身元素产生BFC,span本来是inline元素,却可以设置行高,就是因为float形成了块的效应。
2. float影响
- 对自身的影响
- 形成“块”(BFC)
- 位置尽量靠上
- 位置尽量靠左(右)
- 对兄弟元素
- 上面贴非float元素
- 旁边贴float元素
- 不影响其它块级元素位置
- 影响其它块级元素内部文本
- 对父级元素
- 从布局上“消失”
- 高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
.container {
background: red;
width: 400px;
/* margin: 20px; */
}
.p1 {
background: green;
float: left;
width: 200px;
height: 50px;
}
.container2 {
background: gold;
}
</style>
</head>
<body>
<div class="container">
<span class="p1">
float
</span>
<div class="p2">
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
</div>
</div>
<div class="container container2">
<span>写几个字</span>
<span class="p1">
float
</span>
<span class="p1">
float
</span>
</div>
<div class="container" style="height:200px;background:blue;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</div>
</body>
</html>
解决方式一:
让父级元素也具备BFC特性,加上overflow:hidden
解决方式二:
里面有个元素刚好到浮动的高度,从而达到清除浮动的效果
.container2::after{
content: ' ';
clear: both;
display: block;
visibility: hidden;
height:0;
}
3. float浮动 + margin
- 好处:兼容性比较好,支持大部分浏览器。
<!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>float+margin布局</title>
<style>
.container{
width: 800px;
height: 200px;
}
.left{
background: red;
float: left;
height: 100%;
width: 200px;
}
.right{
background: blue;
float: right;
width: 200px;
height: 100%;
}
.middle{
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="middle">
中间
</div>
</div>
</body>
</html>
.left的样式也可以使用绝对定位来实现,也能达到相同的效果,但是高度就需要固定。
.left{
background: red;
width: 200px;
position: absolute;
height:200px;
}
4. 如何清除浮动
- 原因:浮动元素不会占据父元素的空间,父元素布局的时候,不会管浮动元素,有可能浮动元素就会超出父元素,从而对其他元素造成影响,所以作为一个父元素一定要清除浮动,保证对外面是没有影响的。
- 解决:让盒子负责自己的布局
- overflow:hidden(auto)
- ::after{clear:both}