<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动元素的细则</title>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-color: aqua;
}
p{
width: 300px;
height: 300px;
background-color: salmon;
position:;
float: left;
}
.wrap{
width: 399px; /*空间不足时就会换行 400px就不用换行*/
height: 400px;
background: olive;
}
.class1{
width: 100px;
height: 100px;
background-color: wheat;
}
.class2{
width: 100px;
height: 100px;
background-color: slateblue;
}
.class3{
width: 100px;
height: 100px;
background-color: brown;
}
.class4{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.wrap div{
float: left;
}
.wrap1{
width: 800px;
height: 400px;
background: olive;
}
.class5{
width: 700px;
height: 100px;
background-color: wheat;
float: left;
}
.class6{
width: 100px;
height: 100px;
background-color: slateblue;
float: left;
}
.class7{
width: 100px;
height: 100px;
background-color: brown;
float: right;
}
.class8{
width: 100px;
height: 100px;
background-color: salmon;
float:right;
}
</style>
</head>
<body>
<!--1.浮动框不能在其浮动方向上一处包含块(例子包含块就是div)
浮动元素左浮，其左边界不能超出包含块的左边界
浮动元素右浮，其右边界不能超出包含块的右边界
<div class="div">
<p class="p">我是浮动元素</p>
</div>-->
<!--2.浮动框的定位会受同向浮动框的影响
也就是说：当前浮动元素的定位会收到之前生成的浮动框的影响，他们不会相互遮拦，当前浮动框会紧挨着之前的浮动框的左边界进行定位。
如果当前空间不足，则会换行，否则就会放置在之前浮动框下面.
<div class="wrap">
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>-->
3.浮动框与不同方向浮动框不可以重叠
解释：同一行中不同方向的浮动框不能有互相重叠的现象
<div class="wrap1">
<div class="class5"></div>
<div class="class6"></div>
<div class="class7"></div>
<div class="class8"></div>
</div>
4.浮动框的边界不能超出包含块的边界
</body>
</html>
HTML5学习_day05(5)--html之float元素的规则
最新推荐文章于 2021-06-02 19:46:25 发布
389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
