css别忘记清除浮动clear:both

2024-12-02 15:30:12

用空标签清除
.clr {clear: both;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <p class="clr"></p>
</div>
使用 overflow 属性
#layout {overflow:auto; zoom:1;}

<div id="layout">
    <div id="left">Left</div>
    <div id="right">Right</div>
</div>
使用 :after （非 IE 浏览器）
#layout:after{
    display: block;
    clear: both; content: "";
    visibility:hidden; height: 0;
}

<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>注：使用 :after 需要注意几点，设置高度为零（height: 0;）；content 是必须的，但其值可以为空

CSS清除浮动常用方法小结

常用的清除浮动的方法有以下三种. 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. Left Right [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 1.使用空标签清除浮动.我用了很久的一种方法,空标签可以是div标签,也可以是P标签.我习惯用<P>,够简短,也有很多人用<hr>,只是需要另外为其清除边框,但理论上可以是任何标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:b
CSS清除浮动方法汇总

清除浮动 //IE浏览器 .clearfloat{ zoom:1 } //其他浏览器 .clearfloat ; after{ display:bloak; clean:both; content:""; visibility: hidden; height:0 }
css别忘记清除浮动clear:both

用空标签清除 .clr {clear: both;} <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> <p class="clr"></p> </div>使用 overflow 属性 #layout {overfl
JS中使用 after 伪类清除浮动实例

以前清除浮动的时候总是在想要清除浮动的元素后面添加 <div style="clear:both;"></div> 或者写在br标签里面来解决,但这样会增加无语义的标签,下面是用after伪类实现,兼容多种浏览器 .clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } 为兼容IE6,IE7,因为ie6,ie7不能用after伪
对于IE7、FF、OP清除浮动的最优方法第1/2页

在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF.OP.IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了. 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性. css代码复制代码代码如下: ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left
一个老外弄的Clearing floats(清除浮动的方法)

我常用的都是clear:both;方法,如 <div style="clear:both"> <div style="float:left"></div> <div style="float:right"></div> </div> 今在PlanABC看到另外这种方法,特些记录下来. div.container { border: 1px solid #00000
HTML clearfix清除浮动讲解

一.浮动的概念浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. 浮动会导致父元素高度坍塌父元素中有子元素,并且父元素没有设置高度,子元素在父元素中浮动,结果必然是父元素的高度为0,这也就导致了父元素高度塌陷问题. 浮动脱离文档流,这个问题会对整个页面布局带来很大影响,如何解决高度坍塌问题,我们需要清除浮动. 三.浮动的清除 1. clear属性的空标签在浮
html清除浮动的6种方法示例

使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签由于inline-block属性换行的时候被解析(有间隙)故解决方法使用浮动float:left/right 使用浮动时出现的情况: 1.使块元素在一行显示2.使内嵌元素支持宽高3.不设置不宽高的时候宽度由内容撑开4.换行不被解析(故使用行内元素的时候清除间隙的方法可以使用浮动)5.元素添加浮动,会脱离文档流,按照指定的
CSS中Float（浮动）相关技巧文章

Float(浮动)概念也许是CSS中最让人迷惑的一个概念吧.Float经常被错误理解,而且因为将上下文元素全部浮动导致的可读性.可用性问题备受责难.然而,这些问题的根源并不在于理论本身,而是开发人员以及浏览器对理论的解读造成的. 如果你认真的去读一下浮动概念,你会发现并不像所见的那样复杂.大多数问题都是由于老版本的IE带来的(我只是猜想).如果你知道这些bug,你就能避免这些问题. 让我们尝试去解决这些问题并澄清一些以前使用浮动的误解.我们参考了成打的相关文章,并选取了最为重要的一些你必须了解的
div+CSS 兼容小摘

区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

css别忘记清除浮动clear:both

相关推荐

随机推荐