浮动
2018-07-09 本文已影响0人
WANGLIN_HZ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档流</title>
</head>
<body>
<div style="background-color: red;">
<div style="height: 30px;"></div>
</div>
<div style="width: 110px; height: 110px; background-color: gold;"></div>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
</body>
</html>
文档流
- 文档流指的是文档中可现实的对象在排列时所占用的位置。
- 将窗体自上而下分成一行行，并在每行中按从左至右的顺序排 放元素，即为文档流。
- 也就是说在文档流中元素默认会紧贴到上一个元素的右边，如 果右边不足以放下元素，元素则会另起一行，在新的一行中继 续从左至右摆放。
- 这样一来每一个块元素都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。
浮动
<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<style type="text/css">
.w{
display: inline-block;
width: 100px;
height: 100px;
background-color: #ff3;
float: right;
}
.w1{
display: inline-block;
/*: 100px;*/
height: 100px;
background-color: #ff8;
}
.w2{
/*display: inline-block;*/
width: 100px;
height: 100px;
background-color: rgb(180,220,187);
float: left;
</style>
</head>
<body>
<div class="w"></div>
<div class="w1">a</div>
<div class="w2"></div>
</body>
</html>
浮动
-
所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来。
-
浮动使用float属性。
-
可选值：
none：不浮动
left：向左浮动
right：向右浮动 -
块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一 个块级元素。
-
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元 素时我们都会为其指定一个宽度。
-
当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕 在元素的周围。
-
浮动会使元素完全脱离文本流，也就是不再在文档中在占用位置。
-
元素设置浮动以后，会一直向上漂浮直到遇到父元素的边界或者其他 浮动元素。
-
元素浮动以后即完全脱离文档流，这时不会再影响父元素的高度。也 就是浮动元素不会撑开父元素。
-
浮动元素默认会变为块元素，即使设置display:inline以后其依然是个 块元素。
