*{margin:0; padding:0;}
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px;border:1px solid gray; }
#mid{position:absolute;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0px;border:1px solid #999;}
#wrap{width:970px; margin:0 auto;}
#mainbody{position:relative; margin-top:15px;}
#left{float:left;width:110px;border:1px solid gray; }
#mid{position:absolute;left:123px;width:650px;border:1px solid #999;}
#right{position:absolute;left:790px;top:0px;border:1px solid #999;}
2016-12-27
最新回答 / weixin_慕函数2472239
后面的p标签有内容为啥要被盖住,前面的box1 box2有了内容也不会被盖住。设置了浮动属性没设置宽度,盒子的宽度是随盒子的内容自适应的
2016-12-27
第二种就是给mainbody设置overflow:hidden并设置宽度, overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。
缺点是不能和position配合使用,因为超出的尺寸的会被隐藏。
所以推荐在没有position布局和float布局混合使用的情况下使用。
缺点是不能和position配合使用,因为超出的尺寸的会被隐藏。
所以推荐在没有position布局和float布局混合使用的情况下使用。
清除浮动除了视频讲解中两种方法以外还有很多方法(视频讲的还是很浅的)
第一种clear:both,清除临近的元素的浮动影响,可以通过在mainbody中加一个空div,给空div设置clearboth。
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
<div class="clearfloat"></div>
</div>
css中加代码:
.clearfloat{clear:both;}
缺点是需要加一个空div,会造成结构混乱,所以不推荐。
第一种clear:both,清除临近的元素的浮动影响,可以通过在mainbody中加一个空div,给空div设置clearboth。
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
<div class="clearfloat"></div>
</div>
css中加代码:
.clearfloat{clear:both;}
缺点是需要加一个空div,会造成结构混乱,所以不推荐。
使用 overflow 默认值(visible)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交,它会强制(重新)包围内容元素。 (个人理解) 因为left与right漂浮于mainbody上方,导致left与right会超出mainbody块所能包含的区域,为了让mainbody块能够包裹住left和right,会强制性创建一个区块将left与right包裹住,所以mainbody的高度会包裹住left与right。
2016-12-24