                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

大家幫我看下這個布局怎么寫？有圖

這個布局的foot部分怎么寫？我寫了半天，head+left+right部分已經寫完也寫對了，但是就foot部分老是不行

我的代碼：

<html>
<head>
<style?type="text/css">
div?{text-align:center;?font-size:30px;?margin-bottom:30px;}

.head?{border:5px?solid?#000;?width:800px;?height:50px;}
.left?{border:5px?solid?#000;?width:640px;?height:200px;?float:left;}
.right?{border:5px?solid?#000;?width:140px;?height:200px;?float:left;?margin-left:10px;}
.foot?{border:5px?solid?#000;?width:800px;?height:50px;?margin-top:30px;}

</style>
</head>

<body>

<div?class="head">head</div>
<div?class="left">left</div>
<div?class="right">right</div>
<div?class="foot">foot</div>

</body>
</html>

但是寫完后的效果是這樣的：想問下最后的foot代碼哪里出錯了？該怎么寫？

小小單身

2016-07-17

源自：如何用CSS進行網頁布局 4-1

關注問題我要回答

800

操作

收起

1 回答

gkenan 回答被采納 +3 積分
2016-07-17

<!--
當你對left和right應用float屬性時，它們兩塊已經脫離了文檔流，foot定位的時候看不見它們，
使用clear：both之后，foot會參考浮動元素進行定位，這時候就好了。你把網頁想象成兩層，浮動本身
就是在頂層飄著，不會影響底層的定位的。
-->
<html>
<head>
<style?type="text/css">
div?{
????text-align:?center;
????font-size:?30px;
}
.head?{
????border:?5px?solid?#000;
????width:?800px;
????height:?50px;
}
.left?{
????border:?5px?solid?#000;
????width:?640px;
????height:?200px;
????float:?left;
}
.right?{
????border:?5px?solid?#000;
????width:?140px;
????height:?200px;
????float:?left;
????margin-left:?10px;
}
.foot?{
????border:?5px?solid?#000;
????width:?800px;
????height:?50px;
????margin-top:?30px;
????<!--
????讓foot識別float塊?
????-->
????clear:both;
????}
</style>
</head>

<body>
<div?class="head">head</div>
<div?class="left">left</div>
<div?class="right">right</div>
<div?class="foot">foot</div>
</body>
</html>