工作的忙碌,没时间总结如何处理清除网页float的经验。
昨天去面试了下,说到这问题,觉的很有必要总结下。
刚下火车,早上精力比较充沛。哈哈
方法一:使用空标签清除浮动:
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:先总结这,还有待补充解释.
分享到:
相关推荐
使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。本文给大家带来了CSS清除浮动float的三种方法小结,感兴趣的朋友跟随脚本之家小编一起看看吧
具体详细的阐述了css浮动如何解决和浮动产生的原因。
css中3种清除浮动方法css中3种清除浮动方法
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将...
主要介绍了详解css清除浮动float的七种常用方法总结和兼容性处理,非常具有实用价值,需要的朋友可以参考下
言归正传目前用来清除“闭合(清除)浮动”的方法,主要是一下四种:1.额外标签法这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,...
清除浮动方法方法一:使用带clear属性的空元素 在浮动元素后使用一个空元素如<div class=clear></div>,并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或来进行清理。 CSS Code复制内容到剪贴板 ....
添加css属性: .container { //因为要通过box撑起container的高度,所以这里不设置height width: 300px; border: 1px solid black; background-color: rebeccapurple; } #box { float: left; width: 140px; ...
BFC的区域不会与float box重叠。 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。 BFC就是页面上的一个隔离的独立容器,...
主要介绍了CSS使用float属性设置浮动元素的实例教程,包括使用overflow清除浮动的方法,需要的朋友可以参考下
清除浮动的原因 假设一个 div 内部有个浮动的 div,当内部 div 的高度要比外层的父级 div 高度大时,将会导致父级 div 高度无法随着内部 div 的高度自适应,这是由于浮动元素已经脱离了正常文档流,因此无法对父级...
2、.after-clear-float :after{content:; display:block; clear:both;}利用伪类添加新元素,原理同上,所以只适用于父容器最后一级子元素是浮动的,即浮动元素后面没有非浮动元素把它和父容器隔开。只是IE6/7不...
本文主要介绍了CSS的一些关于浮动,清除,闭合的技巧
style type=text/css> .div1{background:#000080;border:1px solid red;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;...
使用div+css(姑且这样叫,虽然我也不喜欢,但是叫什么呢?)布局的好处不用多说,经常性地会使用到float,那么清除浮动就是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。
什么是CSS清除浮动? 网络上流行的说法是:在非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的...