                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

为什么右边（right）浮动，不能实现宽度自适应呢？代码如下：

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

<head>

<title>混合布局编程挑战</title>

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{width:100%;height:80px;background:#ccc;}

.main{height:600px;background:#f00;margin:0 auto;}

.left{width:200px;height:100%;background:#00f; }

.right{height:100%;background:#0da;float:right;}

.foot{height:50px;background:#f31;}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

慕UI1237056

2016-03-18

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

1086

操作

收起

5 回答

Csunnnnn 回答被采纳 +3 积分
2016-03-29

浮动元素如果不定量设置宽高，则其宽高属性默认为0值。如果不设定宽高的浮动元素里面有子内容，例如你代码中的文本right，则浮动元素的宽高由文本right的宽高决定。所以设置了浮动属性的元素是无法自适应的，必须取消其浮动属性。

你可以试着把你代码中的height:100%去掉，就会发现.right这个块缩到了.main的右上角。

但要注意的是，如果把浮动属性去掉，那么.right就会是一个子块，会占满整个.main块，因为这个时候你设置的高度是100%，同父级块，而块元素是要单独占一行的。于是.left块就会被挤出.main块区域。

这时候就必须要为.left预留足够边距，即 margin-left:200px;。想要出现题目中的间隔缝隙，只需把左边距加大即可。

但这个时候你又会发现，.left块仍然会被挤到下方。这就是因为.left的设置语句出现在.right后，属于后加载对象。所以.main依然不会有位置给它。这个时候就要用到绝对定位，把.left固定在.main的左边。这个绝对定位可以相对于body，也可以相对于.main。如果要相对于.main，则要在.main中加入相对定位，才能保证其子元素的定位是相对于父级定位的。