float
2022-07-29 本文已影响0人
冰点雨
float 通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值：
none 默认值，元素不浮动
left 向左浮动
right 向右浮动
注意：元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置
所以元素下边的还在文档流中的元素会自动向上移动
浮动的特点：
1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.元素设置浮动以后，元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5.浮动元素的上边是一个没有浮动的块元素，则浮动元素不会上移
6.浮动元素不会超过它上边的浮动兄弟元素，最多和它一样高
float的特点
元素在设置浮动后，会脱离文档流
脱离文档流的特点：
块元素
1.块元素不会再单独占一行
2.块元素的宽度高度默认被内容撑开
行内元素
1.行内元素会变成块元素，特点和块元素相同
float浮动可实现 图文混排
image.png
<style>
.box1{
width: 100px;
height: 100px;
background-color: aquamarine;
/* 可实现图文混排 */
float: left;
margin: 10px;
}
</style>
<body>
<div class="box1"></div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elitLorem, ipsum dolor fuga quasi sequi facilis, eos unde, numquam voluptates sed velit?</p>
</body>
