`
lhx1026
  • 浏览: 301257 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

css中 clear:both; 的作用

CSS 
阅读更多

它的作用是清除一下之前的样式,有时候前面的一些样式影响会影响到后面的样式,所以最好每次用新样式都使用 clear:both;

 

clear:both;
CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮 动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清除

例子:

<p style="float:left;width :100px;">这个是第1列,</p>
<p style="float:left;width :400px;">这个是第2列,</p>
<p >这个是列的下面。</p>

如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个这利加一个清除浮动。
<p style="float:left;width :100px;">这个是第1列,</p>
<p style="float:left;width :400px;">这个是第2列,</p>
<p clear:both;>这个是列的下面。</p>

分享到:
评论

相关推荐

    深度理解CSS clear:both的使用

    clear:both用来清除浮动这是一直来的印象,但是自己很少会用这个,理解其实也不太正确,今天查查了资料,记录一下 float的脱离文档流 float的原始作用是为了实现文字环绕的作用,可以理解为部分脱离文档流。 CSS中说...

    css别忘记清除浮动clear:both

    总结下清除浮动的一般解决方案,做网页时要注意

    CSS 浮动清理,不使用 clear:both标签

    CSS:浮动清理,不使用 clear:both标签 在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:&lt;div xss=removed&gt;&lt;/div&gt;。

    详解CSS中clear:left/right的用法

     clear语法: clear : none | left | right | both  取值: none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 w3.org官方的解释...

    CSS——float属性及Clear:both备忘笔记

    CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果,所以需要在样式定义的后面进行清除浮动

    清除浮动clear:both的应用详解

    在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both;CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float(浮动...

    CSS样式文件格式化工具

    很多工具生成的Css 都是多行的,很占用空间,于是写了这个格式化工具,将一个样式格式化为一行。 如有不足之处 敬请斧正! 例如: .UserLogin_7{ width:213px; height:45px; clear:both; margin-left:0px; ...

    CSS清楚浮动clear:both的实例代码

    今天给大家讲一下清楚浮动,在讲清除浮动前,需要了解什么是浮动,这里我就不给你大家详细介绍浮动了。 浮动也就是脱离文档流,脱离文档流了,那父级的宽高就不能被子集撑开,所以我们就需要清楚浮动,废话不多说,...

    CSS在图片中的应用

    clear:both; height:66px; margin:0 auto; font-size:12px; } #face li { list-style:none; padding:0 0 0 25px; margin:0; width:57px; height:26px; line-height:26px; float:left; background: url...

    DIV 再论清除浮动的空方法

    .clear{clear:both;} 更为优良的 CSS 代码是: .clear:after{content:.;display:block;height:0;clear:both;visibility:hidden;} .clear{zoom:1;} 这个方法目前已经广泛使用,淘宝、口碑,都是这种用法。通过 after ...

    CSS中float和clear各是什么意思有哪些区别

    禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.上面提到的行也可能是多行组成的一个块,不...

    common.css

    css样式,项目中用到的,记录在此 页面设计遇到的一些问题: 1、div悬浮感、div浮动(变成行内块)、清除浮动 样式: box-shadow: 2px 2px 5px #bbb;  float: left; clear: both; 2、外边距自动...

    CSS的clear属性清除浮动的基本用法示例

    什么是CSS清除浮动? 网络上流行的说法是:在非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且... .clear-float {clear:both;}  clear 属性是 CSS 1 就提供的用来清除浮动的样式,设置了 clear 属性的元

    css清除浮动clearfix:after的用法详解(附完整代码)

    网上常用的完整代码: CSS Code复制内容到剪贴板 ... clear:both; overflow:hidden; } .clearfix{ *zoom:1; }  如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div

    浅谈CSS中的clear清除浮动

    2、一开始在CSS中clear浮动是默认both,也就是说一开始不能有浮动的。 3、使用的案例:假设我清除第三个DIV的浮动 XML/HTML Code复制内容到剪贴板 &lt;style type=text/css&gt;  div{ border:1px solid red;...

    CSS控制html文本溢出

    &lt;title&gt;CSS控制文本溢出_网页特效_javascript特效_css特效-... clear: both"&gt; 本特效由&lt;a href="http://www.viewcss.com" target="_blank"&gt;ViewCss网页特效网收集和整理,请支持原创精神,转载请注明出处! &lt;/body&gt;

    css如何清除浮动常用的方法有哪些

    #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:...

    最简洁的CSS清除浮动的方法

    清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both 等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。 复制代码代码如下:/* ...

Global site tag (gtag.js) - Google Analytics