CSS float
2018-12-08 本文已影响5人
roy_pub
网页布局的核心，利用 CSS 来摆放盒子的位置，如何把盒子摆放到合适的位置？
CSS 定位分为三种，普通流（标准流）、浮动、定位。
- 普通流，网页标签从上到下，从左往右布局，比如块级元素独占一行，行内元素会按顺序从前往后排，按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通布局。
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.up {
width: 100px;
height: 100px;
background-color: pink;
}
.down {
width: 100px;
height: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="up">
</div>
<div class="down"></div>
</body>
</html>
- float 浮动最早用来控制图片，浮动可以让多个盒子在一行内显示，可以用来布局。浮动脱离标准流，移动到父元素中之东的位置。
| 属性 | 说明 |
|---|---|
| left | 左浮动 |
| right | 右浮动 |
| none | 不浮动 |
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.up {
width: 50%;
height: 100px;
background-color: pink;
float: left;
}
.down {
width: 60%;
height: 150px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="up">
</div>
<div class="down"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.up {
width: 50%;
height: 100px;
background-color: pink;
float: left;
}
.down {
width: 50%;
height: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="up">
</div>
<div class="down"></div>
</body>
</html>
- 浮动可以让元素默认转化为行内块，大小取决于内容多少
- 如果给行内元素添加了浮动，此时不需要转化这个元素也有宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.divOne {
height: 100px;
background-color: green;
}
.divTwo {
height: 100px;
background-color: red;
float: left; //浮动可以让元素默认转化为行内块，大小取决于内容多少
}
span {
width: 100px;
height: 100px;
background-color: cyan;
float: left; //如果给行内元素添加了浮动，此时不需要转化这个元素也有宽高
}
</style>
</head>
<body>
<div class="divOne">Hello World</div>
<div class="divTwo">Hello World</div>
<span>Hello World</span>
</body>
</html>
