方法二:使用外墙元素隔离法
首先我们看下下面的案例,该案例中,由于#inner元素浮动的原因,导致父元素#wrap没有高度,从而下面的#content元素从页面的顶端开始布局,结果布局错乱
|
<div id=”wrap”> <div id=”inner”></div> </div> <div id=”content”>123</div> |
|
<style> #wrap{ background-color: red; } #inner{ width:300px; height:300px; float: left; background-color: blue; } #content{ background-color: gray; } </style> |
 |
我们这时候给#wrap元素和#content元素之间添加一堵墙(一个元素),并给他添加上clear属性,从而清除该元素受到的浮动的影响,使得后续的布局能正常显示
|
<div id=”wrap”> <div id=”inner”></div> </div> <div id=”wrap2″>”外墙”</div> <div id=”content”>123</div> |
|
<style> #wrap{ background-color: red; } #inner{ width:300px; height:300px; float: left; background-color: blue; } #wrap2{ height: 50px; background-color: yellow; clear:both; } #content{ background-color: gray; } </style> |
 |
说明:
- 完美隔开, 现在#content元素完全和前面的浮动元素隔离了
2.你可以随意控制”墙”的高度,来增加#wrap和#content元素之间的距离
3.缺点:
(1)额外增加了一个元素,影响整体结构
(2)#wrap元素的高度塌陷问题没得到解决,依旧没有高度
上一篇: java培训单行函数之流程函数
下一篇: java培训事务的ACID特性
