CSS布局的三种机制
网页布局的核心——就是用CSS来摆放盒子。
CSS提供了3种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:
一、普通流(标准流)
- 块级元素会独占一行,从上向下顺序排列;
- 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table
- 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则会自动换行;
- 常用元素:span、a、i、em等
二、浮动
- 让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
三、定位
- 将盒子定在浏览器的某一个位置——CSS离不开定位,特别是后面的js特效。
一、什么是浮动
概念:元素的浮动是指设置了浮动属性的元素会
- 脱离标准普通流的控制
- 移动到指定的位置。
作用:
- 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段。
- 可以实现盒子的左右对齐等等
- 浮动最早是用来控制图片,实现文字环绕图片的效果.
语法:
选择器{float:属性值}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
口诀:
浮动——浮~ 浮 ~ 浮 ~ ~ ~漂浮在普通流的上面。脱离标准流。俗称“脱标”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
float: left;
}
.box2{
width: 300px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
小结:
- float属性会让盒子漂浮在标准流的上面,所以第二个标准流的盒子跑到浮动盒子的底下了。
浮动——漏漏漏~~~浮动的盒子,把自己原来的位置漏给下面标准流的盒子,就是不占有原来位置,是脱离标准流的,我们俗称“脱标"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
/* 让第一个盒子浮动起来,不占位置 */
float: left;
}
.box2{
width: 300px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
所以,box2下面的其实就是跑到box1盒子下面了,被box1给压住了,遮挡起来了。
效果图
浮动——特性 float属性会改变元素display属性。
任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素,生成的块级框和行内块极其相似。
体验案例——div水平排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
height: 200px;
background-color: pink;
/* 转换为行内快元素,可以水平显示,不过div之间有间隙,不方便处理 */
/* display: inline-block; */
/* 设置浮动属性,可以让div水平排列,并且没有间隙 */
float: left;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
/* 转换为行内快元素,可以水平显示,不过div之间有间隙,不方便处理 */
/* display: inline-block; */
/* 设置浮动属性,可以让div水平排列,并且没有间隙 */
float: left;
}
.box2{
width: 200px;
float: left;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
注意:浮动的元素互相贴靠在一起的,但是如果父级元素宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
浮动(float)小结
特点 | 说明 |
---|---|
浮 | 加了浮动的盒子是浮起来的,漂浮在其他标准流盒子的上面 |
漏 | 加了浮动的盒子是不占位置的,它原来的位置漏给了标准流的盒子 |
特 | **特别注意:**浮动的元素会改变display属性,类似转换为了行内快,但是元素之间没有空白缝隙 |
浮动(float)的扩展
- 子盒子的浮动参照父盒子对齐
- 不会与父盒子的边框重叠,也不会超过父盒子的内间距
- 浮动元素与兄弟盒子的关系
在一个父级盒子中,如果前一个兄弟盒子是:
- 浮动的,那么当前盒子会与前一个盒子的顶部对齐;
- 普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。
ps:浮动只会影响当前的或者后面的标准流的盒子,不会影响前面的标准流
建议:如果一个盒子里面有多个盒子,如果其中的一个盒子浮动了,其他兄弟也应该浮动。防止引起问题
二、清除浮动(给父级元素清除元素)
- 为什么要清除浮动
- 因为父级盒子很多情况下,不方便给高度,但是盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子
- 总结:
- 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
- 准确地说,并不是清除浮动,而是清除浮动后造成的影响
- 清除浮动的本质
- 清除浮动主要为了解决父级元素因为子集浮动引起高度为0的问题。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了
- 清除浮动的方法
- 给父级元素设高(一般不推荐使用)
- clear语法
- 额外标签法(隔墙法)
- 父级添加overflow属性方法
- 使用after伪类元素清除浮动
- 使用双伪元素清除浮动
ps:关于清除浮动的详细情况请点击:清除浮动的方法