CSS——清除浮动

<div id="main" class="clear">

  <div id="left">

  </div>

  

  <div id="right">

  </div>

</div>

<div id="other">

</div>

/*-----------------------------------------------*/

#main{

backgroud-color:#aaa;

padding:10px;

}

#left{

background-color:#bbb;

padding:5px;

border:1px solid red;

width:100px;

height:100px;

float:left;

}

#right{

background-color:#ccc;

padding:5px;

border:1px solid red;

width:100px;

height:100px;

float:left;

border:1px solid red;

float:right;

}

.clear:after{

content:".";

height:0;

visibility:hidden;

display:both;

clear:both;

}

时间: 2024-11-08 19:02:02

CSS——清除浮动的相关文章

css清除浮动的方法总结

在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问

css 清除浮动 兼容IE+, FF

上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>css 清除浮动 兼容IE+, FF</title> <style type="text/css"> .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; c

css 清除浮动的各种方法

1.为什么要清除浮动 在网页中,DIV一般都是嵌套的,外面称为窗口,里面的DIV存放内容,如果不浮动的话,如下面这段代码<div style=”background:#ccc;”> <div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div> </div>本来我们期望看到的是,外面背景为#ccc的层包含了里面背景为#333的层,但实际上,外面的层在显

css清除浮动各方法与原理

说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 这就产生了一个问题:浮动元素所在父元素不会自动伸长以便闭合浮动元素,任其“红杏出墙”,这显然不符合我们的“伦理观”,所以要“抓回来”施以家法:那么如何抓呢? 提起css,提起(x)html,首先进入脑海的是楚楚动人的页面吗?不,首先应该是这楚楚动人的页面的背后的“楚楚冻人

css清除浮动float的三种方法总结【转载自https://my.oschina.net/leipeng/blog/221125】

摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3

CSS清除浮动大全共8种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 代码如下

css清除浮动代码实例演示

css清除浮动代码实例演示:在页面中如果采用了浮动,那么清除浮动则是必须要进行的操作,否则可能引起一些意想不到的后果.本章节不会对浮动或者清除浮动的原理做介绍,只是分享一下清除浮动的几段代码,因为有些朋友可能需要的就是一个代码实例,关于浮动或者清除清除浮动的相关内容可以参阅相关阅读.一.使用overflow清除浮动: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$(&#39;.float&#39;)

一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer">     <div class="div1">1</div>     <div class="div2">2</div>     <div class="div3">3</div> </div> 分析CSS代码样

css清除浮动float的三种方法总结

转载地址:https://my.oschina.net/leipeng/blog/221125 css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</

css清除浮动的五种常用方法

父级div定义固定高度height 结尾处加空div标签 clear:both <style type="text/css"> ... /*清除浮动代码*/ .clearfloat{clear:both} </style> <div class="box"> <div class="float-left">Left</div> <div class="float-righ