工作的忙碌,没时间总结如何处理清除网页float的经验。
昨天去面试了下,说到这问题,觉的很有必要总结下。
刚下火车,早上精力比较充沛。哈哈
方法一:使用空标签清除浮动:
方法二:使用overflow属性;
方法三:使用after伪对象清楚浮动。
start work:先总结这,还有待补充解释.
昨天去面试了下,说到这问题,觉的很有必要总结下。
刚下火车,早上精力比较充沛。哈哈
方法一:使用空标签清除浮动:
css code:
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
margin:0;
padding:0
}
body{
font: 400 12px/18px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#666;
}
#layout{
background:#F3F5F9;
}
#l_block{
background:#ccc;
width:300px;
height:200px;
float:left;
}
#r_block{
background:#f00;
width:100px;
height:100px;
float:right;
}
.c_f{
clear:both;
}
-->
</style>
html code:
<div id="layout">
<div id="l_block">left block content</div>
<div id="r_block">right block content</div>
<div class="c_f">This is a content area</div> <!--clear float-->
</div>
方法二:使用overflow属性;
css code:
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
margin:0;
padding:0
}
body{
font: 400 12px/18px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#666;
}
#layout{
overflow:auto;
zoom:1; /*ie6*/
background:#F3F5F9;
}
#l_block{
background:#ccc;
width:300px;
height:200px;
float:left;
}
#r_block{
background:#f00;
width:100px;
height:100px;
float:right;
}
-->
</style>
html code:
<div id="layout">
<div id="l_block">left block content</div>
<div id="r_block">right block content</div>
</div>
方法三:使用after伪对象清楚浮动。
css code:
<style type="text/css">
<!--
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
margin:0;
padding:0
}
body{
font: 400 12px/18px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#666;
}
#layout{
background:#F3F5F9;
}
#layout:after{
height:0;
display:block;
clear:both;
content:"";
visibility:hidden;
}
#l_block{
background:#ccc;
width:300px;
height:200px;
float:left;
}
#r_block{
background:#f00;
width:100px;
height:100px;
float:right;
}
-->
</style>
html code:
<div id="layout">
<div id="l_block">left block content</div>
<div id="r_block">right block content</div>
</div>
start work:先总结这,还有待补充解释.