浮动布局
基本介绍
浮动布局是CSS早期最常使用的一种布局方式。
说白了就是使元素进行漂浮,从而脱离默认文档流排列的一种技术手段。
使用浮动布局应该注意以下几点:
- 浮动应当发生在一个大盒子内部(body标签也可以看做一个大盒子)
- 浮动后的元素会影响后面未浮动元素的排列方式
- 浮动元素会自动转换为inline-block状态
- 浮动元素只会在父盒子的content区域,不会溢出到父盒子的padding区域
- 当一个父盒子中所有的元素都进行浮动后,可能会造成父盒子高度塌陷的问题
使用浮动
对一个元素使用float就可以让该元素漂浮起来,它可以指定以下一些方向:
选项 | 说明 |
---|---|
left | 向左浮动 |
right | 向右浮动 |
none | 不浮动 |
注意!使用向右浮动会发生倒序排列,1234变为4321,而左浮动则是正序排列。
如果你不想右浮动改变他们的排列顺序,则可以将它们全部包装在一个父级标签中,将父级标签右浮动,再将子标签做浮动。
如下图所示:
文档流
文档流排列是一种自上而下,自左向右的排列方式。
对于block块级元素来说,它应该是独占一行的。
代码示例:
<!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>
<link rel="stylesheet" href="./css_reset.css">
<style>
* {
box-sizing: border-box;
}
main {
width: 230px;
padding: .5rem;
border: 1px solid #000;
}
main div {
width: 100px;
height: 100px;
}
main div:nth-of-type(1) {
border: 1px solid blue;
}
main div:nth-of-type(2) {
background-color: red;
}
</style>
</head>
<body>
<main>
<div></div>
<div></div>
</main>
</body>
</html>
渲染结果:
空间占用
在同级情况下,排列在前的一个标签如果进行浮动设置从而脱离了文档流,那么排列在后的标签会占用之前标签的位置。
如下所示,排列在前的蓝框div如果float: left后,排列在后的红色背景div会向上顶,占用掉之前蓝框div所在的空间位置,而蓝框div则漂浮在了红色背景div的上方。
main div:nth-of-type(1) {
border: 1px solid blue;
float: left;
}
如果排列在前的蓝框div设置为float: right后,排列在后的红色背景div依旧会向上顶,占用掉之前蓝框div所在的空间位置。
main div:nth-of-type(1) {
border: 1px solid blue;
float: right;
}
如果我们对排列在后的红色背景div进行浮动设置的话,排列在前的标签并不会受此影响,但会出现父级高度塌陷问题,即父级盒子的高度会出现令人意外的情况:
main div:nth-of-type(2) {
background-color: red;
float: right;
}
状态转换
设置为浮动的元素都会变为inline-block状态。
如下所示,对一个inline标签进行浮动,它变的可以设置宽高了,对一个block标签进行浮动,它变的不会独占一行了:
代码示例:
<!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>
<link rel="stylesheet" href="./css_reset.css">
<style>
* {
box-sizing: border-box;
}
main {
width: 230px;
padding: .5rem;
border: 1px solid #000;
/* 为了防止父盒子塌陷,所以这里给他定一个高度 */
height: 200px;
}
main span,
div {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
main span {
float: left;
border: 1px solid blue;
}
main div{
float: right;
background-color: red;
}
</style>
</head>
<body>
<main>
<span>inline</span>
<div>block</div>
</main>
</body>
</html>
浮动边界
父盒子中的浮动元素始终会位于父盒子的content区域中,不会超出padding区域。
如下所示:
- content:蓝色
- padding:绿色
- margin:黄色