clear:both是清除什么浮动，footer又没有浮动起来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body{ margin:0; padding:0; font-size:30px; font-weight:bold}

div{ text-align:center; line-height:50px}

.top{ height:100px;background:#9CF}

.head,.main{ width:960px; margin:0 auto;}

.head{ height:100px; background:#F90}

.left{ width:220px; height:600px; background:#ccc; 【任务2】}

.right{ width:740px; height:600px;background:#FCC; float:right}

.r_sub_left{ width:540px; height:600px; background:#9C3; float:left}

.r_sub_right{ width:200px; height:600px; background:#9FC; 【任务3】}

.footer{ height:50px; background:#9F9; 【任务4】}

</style>

</head>

<body>

</div>

<div class="r_sub_left">sub_left

</div>

<div class=" r_sub_right">sub_right

</div>

<div class="footer">footer</div>

</body>

</html>

pherz

浏览 1634回答 1

1回答

OlderSkee

任务2 ： float: left;任务3 ： float: left;任务4 ：clear: both;footer是没有浮动，清除浮动实际上是清除浮动对它的影响。浮动元素默认是不占空间的，上面的left right 都浮动起来了，这个时候下面的footer就会挤到上面浮动元素的底下，那么clear:both 就是清除上面元素浮动对他的影响，让它自己呆在标准流的位置。

3 0

随时随地看视频慕课网APP