最近在项目中有好几次遇到这个问题，感觉是浮动引起的，虽然用解决了，但自己不是特别明白，又在网上查了相关内容，是因为给li设置了浮动之后它就脱离当前正常的文档流，所以没办法撑开外层ul的高度。 以下面代码为例，其实有好几种解决方法，我用的这种并不是最简单的。 给li设置float浮动属性之后，无法撑开外层ul的问题。ul{ border: 1px solid #000; width: 200px; height: auto; margin-top: 100px;}li{ float...
float是什么？ float即为浮动，在html中的作用是使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”。下面解释下这个定义中的几个名词的概念： 文档流：在html中文档流即为元素从上至下排列的顺序。 脱离文档流：元素从正常的排列顺序被抽离。 最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）。 float造成的影响 对其父元素的...
目前用来清除“闭合(清除)浮动”的方法，主要是一下四种： 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。我个人不喜欢这种方法，但是它确实是W3C推荐的方法 或者使用 2. 使用after伪类 这种方法就是对父容器使用after伪类和内容声明在指定的...
抱着对ASP.NET前台开发的热爱，今天上午特别看了float属性，说实话还挺复杂。 先把我的例子放上来，自我理解都在这个例子里了。还有些不完美之处就是，clear属性没放上来。 < html > < head >< title > float属性的自我理解 </ title > < style type ="text/css" > .father { background-color : #fffea6 ; border : 1px solid #111111 ; padding : 25px ; ...
在大多数人真正为div+css中的float（浮动）和clear（清除）正茫然的时候，我给大家讲解一下他们的用法。希望对大家有所帮助； 1float：所谓浮动就是向什么位置对齐，它有三个参数，left right none，当选者float：right的时候意思就是当前div向右浮动。如果下面有一个div的话就会按正常流的默认方式上移动到当前div的左侧。意思就是如果上面使用了float之后就相当于它把位置给让出来了，下面的div就上来和它处于同一行。 其...
注：转自zctya's blog 在用CSS+DIV的布局中，经常会发现，当一个DIV float之后，如果他的高度超过了其父DIV的高度时，其父DIV的高度并不会相应的进行调整。要解决这个问题（也叫做闭合(清除)浮动），我们有四种办法： 1. 额外标签法 这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需 要额外的（而且通常是无语义的）标签...
当一个DIV容器中的所有对象都设置了float属性后，容器不能自动适应高度。 解决的方法有两个： 在容器的最后添加一个空的DIV标签，设置其样式clear:both，然后隐藏这个DIV。 设置容器的样式overflow:hidden/auto以及zoom:1(zoom属性是为了兼容IE6)。
给li加了float属性以后 li显示的标签跳出了div框，这是为什么？ 按产品分类 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 礼盒系列 >>查看全部商品 #quyu1 .l .fenlei_menu { width: 191px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-...
ie7 firefox chrome ie8 float 代码如下： ..... #a{ width:100px; height:100px; background-color:red; border:5px solid #bbbbbb; float:left; } #b{ width:100px; height:100px; background-color:green; border:5px solid #bbbbbb; } #c{ width:100px; height:100px; background-color:yellow; border:5px solid #bbbbbb; float:left; } ...... 11 22 33 ...
是这样的 在内容页面我分两列，一列宽190px，一列宽760px；都没有padding或者是margin，总的页面宽度是950.在大的content里我加了float：left；可是并不管用，二者并不在同一行，而是上下两行。我缩短了760的宽度仍然不管用，求经验人士解答。 回复讨论(解决方案) 你把整个代码贴出来吧，这样说不清. 页面代码： 推荐 ...
111111122222233333333 cccc为什么不和aaaa对齐，而是和bbbb对齐了 回复讨论(解决方案) 坚决消灭零回复。 111111133333333222222 这样就可以了, 共1000px 共1000px a占745px b占745 c 占242 a 和b 不能占一行 因为没有足够的容间，所以b下来了，c不可能上到a对齐 所以和b对齐了
CSS HTML W3C w3c中定义说是用了float的元素会生成块级框，块级不就是换行吗？ 那为啥一个设置了float:left的div之后的div会直接跟上，不换行了呢？这里到底什么意思？ 大神看一下这个图。 #side { height: 192px; float:left; } #main { height:200px; background-color: Aqua; width:600px; } ...
CSS 界面 HTML float 定位 我弄个简单例子: /*自定义盒子的大小*/ div{ border:#999 solid 1px; height:200px; width:300px;} #div_1{background-color:#0FF; float：left; } #div_2{background-color:#F0F; float:left; } #div_3{background-color:#FF0; } 第一个盒子 第二个盒子 第三个盒子 如果将浏览器界面缩小，则二三两个盒子有飘...
初学css，遇到个奇怪的问题，把float去掉后就看不到背景图,firebug上也找不到span元素了，这是什么原因呢? 文本框中的事件应用 .spnInit{width:179px;height:40px;line-height:40px;float:right;background: url('Images/pic_Email_ok.gif') no-repeat;} 回复讨论(解决方案) 补充下，假如不用float属性，该怎样显示出来背景图呢？ 这样不行？ 文本框中的事件应用 ...
中文 English 中文 English 中文 回复讨论(解决方案) 不明白楼主的意思 写个padding-top:1px 做什么？ To：1楼 看来你并没有尝试一下这段代码。你用IE6.0打开就能明白我写这行的意思了 中间三个是平齐的，第一个和最后一个都比中间三个高出一个像素 我写上那个就是说明英文比中文低1px啊，padding-top:1px把第三个li往下挪了1px才能与旁边对齐 它们之间的位置关系是“- _ _ _ -”，没办法这里不能上传本机...