<!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>
#box{
width:500px;
height:500px;
background-color:pink;
}
.box1{
width:100px;
height:100px;
background-color:green;
float: left;
}
.box2{
width:150px;
height:150px;
background-color:yellow;
float:left;
}
.box3{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="box">
<!-- div[class="box$"]*3 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
<!--
浮动的使用:
属性:float
属性值:left right none(默认值,不浮动)
- 元素只能在网页中水平方向进行浮动
- 元素使用浮动后,会脱离文档流(正常页面布局),真实的dom结构还是存在于当前网页中,只不过当前元素是篇幅在浮动层,这个浮动层在浏览器是看不出来的
- 脱离文档流的元素位置不存在
- 浮动元素会出现在浮动层,浮动元素会碰到包含框(父级元素)就停止浮动
- 浮动元素还会碰到前面一个含有浮动属性的盒子也会停止浮动
- 当父级元素的宽度不足以放下所有盒子的时候,最后一个小盒子会往下进行移动知道能够有足够的空间
-->
2021.01.25浮动的使用
最新推荐文章于 2021-11-02 21:03:28 发布