浮动布局
float布局称之为经典布局,一般来说我个人很多时候用display:flex代替,但是在做图文混排的时候不得不用浮动,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动布局</title>
<style>
.container{
background: red;
width: 400px;
border:1px solid #000
}
.p1{
float: left;
width: 200px;
height: 50px;
background: green;
}
.p2{
float: right;
}
</style>
</head>
<body>
<div class="container">
<span class="p1">float</span>
<div class="p2">一个长度单位或者一个百分比一个长度单位或者一个百分比一个长度单位或者一个百分比一个长度单位或者一个百分比
一个长度单位或者一个百分比一个长度单位或者一个百分比一个长度单位或者一个百分比一个长度单位或者一个百分比</div>
</div>
</body>
</html>上面就是一个经典的浮动例子,但是会造成高度坍塌
会发现为什么只有顶部有边框?因为正常情况下块级元素是有内部撑开的,但是设置了浮动他会脱离文档流,所以造成了这种现象,当然不可能放任这种现象存在,会影响布局的,下面就是关于如何清除浮动的常用三种方法
清除浮动
- 给元素增加高度,当然这种扩展性不好
- 添加overflow:hidden
- clear:both
2)为什么使用overflow:hidden就可以呢?因为当在父元素使用了overflow:hidden时候,子元素脱离文档流,那么不知道hidden属性放在哪里?那么hidden就会重新计算高度这样就可以高度坍塌问题
3)
clear:both属性代表了不允许有浮动对象
那么在父类class类container这么添加
.container2::after{
content: 'aaa';
clear:both;
display: block;
visibility: hidden;
height:0;
zoom:1 //兼容性
}
6043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
