使用clear元素,
如果浮動(dòng)元素不壓在普通元素下面,則使用clear元素,如果希望不被左邊元素壓到严就,clear:left祟印;不被右邊的壓到套鹅,clear:right吟孙;兩個(gè)都不許壓住桩卵,clear:both;(這里是left指相對于右邊的左邊元素,還是浮動(dòng)的時(shí)候使用 float:left亚情;的所有元素土浸?)
作業(yè):
如果父div中墓阀,有兩個(gè)子div辜梳,是浮動(dòng)的乌庶,那么透敌,父div的高度有沒有被子div自動(dòng)撐起來?父div高度是多少移稳?
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父div能否被子div撐開</title>
<style>
#father{
width: 600px;
height: 50px;
background-color:blue;
}
#son1{
width: 50px;
height: 40px;
float: :left;
background-color:pink;
}
#son2{
width: 50px;
height: 60px;
float:right ;
background-color:green;
}
</style>
</head>
<body>
<div id="father">
father
<div id="son1">ONE</div>
<div id="son2">TWO</div>
</div>
</body>
</html>
效果不好服傍,
[圖片上傳中。烁挟。警没。(1)]
為什么father的背景色沒有起作用?
為什么兩個(gè)浮動(dòng)的子div沒有并排押搪?
怎么判斷父div有沒有被子div撐開疮茄?
第八課時(shí)
實(shí)戰(zhàn)首頁布局
首先看整個(gè)頁面分為三個(gè)部分力试,頭部,身體帅容,足部。身體中往往又會(huì)分為幾個(gè)部分,
寫代碼,前后省略,
<body>
<div id="container">
作業(yè):完成首頁布局
把icndy 的布局分了一下