                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

827

操作

收起

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>