<!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元素的規則
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章