浮动
CSS布局的三种机制
1.普通流（标准流）
- 块级元素独占一行，从上到下顺序排列。常见的块级元素有div、hr表格行、ul无序列表、ol有序列表、p段落、form表单、table表格、h1-h6等。
- 行内元素在一行内从左到右顺序显示，到父元素边缘就自动换行。常见的有a链接、em强调、span等。
2.浮动
让盒子从普通流中浮起来，主要作用是让多个块级盒子在一行内显示。
3.定位
将某个盒子定位在浏览器的某一固定位置。
浮动
概念：给元素设置了浮动之后，元素会脱离普通流，移动到指定位置。
作用：让多个块级元素在一行内显示；实现盒子左右对齐；实现文字环绕图片的效果等。
float的语法：选择器 { float: 属性值; }
- 设置了浮动的元素是漂浮在普通流元素上面的
- 浮动元素不占有原来的位置，原先的位置会空出来，顺位的标准元素会向上填补这个空位
- 给元素设置浮动，会改变display属性，类似于转换成为行内块，但是行内块之间会有空白缝隙，浮动元素之间是紧贴着的。如果到达父级元素的边界，就会自动排列到下一行对齐。
例1：两个普通流块级元素各占一行从上到下顺序排列
<!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);
}
.box2 {
width: 150px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
当给一个元素设置浮动之后，它就会“飘起来”
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5);
}
例2：将三个块级元素设置display属性转换为行内块，会有空白缝隙。
<!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 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
最低0.47元/天 解锁文章
254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
