float(浮动) 值: left | right | none | inherit 初始值:none
浮动元素会从正常的文档流中删除,但是也会影响到布局,浮动元素会生成一个块级框,不管这个元素本身是什么元素。面试前端的时候会有一些简单的布局题目,比如想要三个div左右固定宽度200px,中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
background-color: silver;
height: 400px;
padding: 20px;
}
.left{
float: left;
width: 200px;
background-color: seagreen;
height: inherit;
}
.right{
float: right;
width: 200px;
background-color: sandybrown;
height: inherit;
}
.center{
background: skyblue;
height: inherit;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
有时候我们并不想让父元素有固定的高度,我们想要中间的元素可以撑开父元素,两边的去自适应高度。假如我们不给父元素高度,给三个div一些文本,中间的多一些,生成的效果如图所示:
并不是我们想要的效果,即使我们给center一个margin:0 200px;
左右并没有撑开,即使设置了height的任何属性都没有办法(原因待学习等我补充),所以想要左右能适应父元素,我们可以使用定位来实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
position: relative;
background-color: silver;
padding: 20px;
text-align: center;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
background-color: seagreen;
height: 100%;
}
.right{
float: right;
width: 200px;
background-color: sandybrown;
}
.center{
margin: 0 200px;
background: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">有时候我们并不想让父元素有固定的高度,我们想要中间的元素可以撑开父元素,两边的去自适应高度。</div>
</div>
</body>
</html>
但是定位是根据包含块的边框来定位的,也就是包含了padding ---未完待续