61,112
社区成员
发帖
与我相关
我的任务
分享定宽+剩余自适应布局存在的问题
常规的定宽+自适应布局，左边定宽，右边自适应宽度。 左边是float:left,右边padding-left将左边的空间撑开。
问题是，如果右边又有float布局，而且需要clear，这下就悲剧了，clear将左边的float:left一起清空，导致的结果是右边clear以后的内容和左边的side底部齐平。这个问题怎么处理呢？
问题是，如果右边又有float布局，而且需要clear，这下就悲剧了，clear将左边的float:left一起清空，导致的结果是右边clear以后的内容和左边的side底部齐平。这个问题怎么处理呢？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li,dd,dl,dt,p{margin:0;padding:0;}
div{border:1px dashed #888;margin:10px;}
.fl{float:left;}
.clear{clear:both;}
.left{width:200px;height:420px;background:#f0c4e3;}
.right{padding-left:220px;}
.main{padding:10px;height:400px;background:#c5efcf;}
.bar{background:#eeebc6;padding:10px;}
.box{width:100px;height:100px;margin:5px;background:#efc5c5;}
</style>
</head>
<body>
<div class="left fl">left left left</div>
<div class="right">
<div class="main">
<div>
<div class="fl box">float box</div>
<div class="fl box">float box</div>
<div class="fl box">float box</div>
<div class="fl box">float box</div>
<div class="fl box">float box</div>
<div class="fl box">float box</div>
<div class="clear">clear : both</div>
</div>
<div class="bar">am I in main?</div>
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
l676331991 2012-11-23
- 打赏
- 举报
clear:right还是不行。
找到了一种解决方案，就是不用clear来清空class="fl box"的浮动，那就是给floatbox的父容器加上overflow:hidden,利用overflow的包裹性撑开本身，达到clear的效果了。
不断学习的ITer 2012-09-13
- 打赏
- 举报
将clear：both 改成 clear：right
不断学习的ITer 2012-09-13
- 打赏
- 举报
将 clear:both 改成 clear:right
