浮动(float)
程序员文章站
2024-01-30 21:55:58
...
浮动(float)
浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。后来发现浮动可以让任何盒子可以一行排列,因此就用浮动的特性来布局了。
属性值描述
left元素向左浮动
right元素向右浮动
none元素不浮动（默认值）
什么是浮动？
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
/* 浮动流可以让块级元素滑动在一行上显示并且无行内块元素之间的缝隙 浮动会找最近的父级进行对齐*/
div {
width: 100px;
height: 100px;
float: left;
}
.one {
background-color: rosybrown;
}
.two {
background-color: red;
}
.three {
background-color: blue;
}
.four {
background-color: yellow;
float: right;
}
/* 清除浮动可让接下来的元素按照标准流在下行显示 */
.five {
background-color: red;
clear: both;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</body>
</html>
浮动详细内幕特性
浮动脱离标准流，不占位置，会影响标准流。
浮动只有左右浮动。
浮动首先创建包含块的概念（包裹）。
浮动的元素总是找理它最近的父级元素对齐，但是不会超出内边距的范围。
浮动的元素排列位置，跟上一个元素（块级）有关系。
如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；
如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。
元素添加浮动后，元素会具有行内块元素的特性。
元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
总结： 浮动 --->
浮动的目的就是为了让多个块级元素同一行上显示。
float
加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。
加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。
特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次特别的注意浮动可以使元素显示模式体现为行内块特性。