因为容器的子元素设置浮动后, 内容移出了文档流! 

解决办法: 
1.给个overflow:hidden;作为闭合浮动元素
2.设定UL 一个固定的高度 下面是一些与之相关的解决办法,参考文章《那些年一起清除过的浮动》
<style type="text/css">
.warp{
width:80%;
border:1px solid #000000;
}
.main{
width:70%;
height:300px;
background-color:#999933;
float:left;
}
.side{
width:22%;
height:300px;
background-color:#66CC33;
float:right;
}
#footer{
width:80%;
height:80px;
background-color:#0000FF;
}
</style>
</head> <body>
<div class="warp">
<h2>1)添加额外标签</h2>
<div class="main">main</div>
<div class="side">side</div>
<div style="clear:both;"></div>
</div>
<div id="footer"></div>
</body>

没有添加红色代码前:

添加红色代码后:

2:<br clear="all"/>

在红色代码处放上如上代码,效果一样

br 有 clear=“all | left | right | none” 属性

3:父元素设置overflow:hidden;(在IE6中还需要触发 hasLayout ,例如 zoom:1)

<body>
<div class="warp" style="overflow:hidden;*zoom:1;">
<h2>3)父元素设置overflow</h2>
<div class="main">main</div>
<div class="side">side</div>
</div>
<div id="footer"></div>
</body>

其余代码如第一个例子,效果都一样

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;04年POPO就发现overflow:hidden会导致中键失效

4)父元素设置 overflow:auto 属性

同样IE6需要触发hasLayout

缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等

5)父元素也设置浮动

针对上例,让footer清除浮动clear:both;否则

缺点:使得与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用

6)父元素设置display:table

缺点:盒模型属性已经改变,由此造成的一系列问题,得不偿失,不推荐使用

7)使用:after 伪元素

由于IE6-7不支持:after,使用 zoom:1触发 hasLayout

原文全部代码如下:

<style type="text/css">  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {display: inline-block;}  /* for IE/Mac */   </style> <!--[if IE]> <style type="text/css"> .clearfix {zoom: 1;/* triggers hasLayout */  display: block;/* resets display for IE/Win */} </style>  <![endif]-->  鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

优点:结构和语义化完全正确,代码量居中

缺点:复用方式不当会造成代码量增加

问题:FF中把UL下的LI设为左浮动UL的背景色就没有了?的更多相关文章

  1. jquery选择div下的ul下的li下的a

    使用jQuery选择器: $("div#div的id ul li a")//选择的是div下 ul下所有li下的所有a标签 $("div#div的id").ch ...

  2. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

  3. 遍历ul下的li,点击弹出li的索引

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...

  4. ul下的li浮动,如何是ul有li的高度

    此时ul展示的界面为: ①给ul加上一个样式,display:inline-block; <html> <head> <title>float</title& ...

  5. 关于<ul> 下的 <li> 里面的<a> 标签字体颜色不能控制

    1.元展示 <ul class="ul"> <li><a href="#">菜单一</a></li> ...

  6. jquery,javascript -设置某一ul下的li下的 a的属性

    //javascriptvar ul = document.getElementById('ul); var as = ul.getElementsByTagName('a'); for(var i ...

  7. 给ul下的li加click时间

    $('.province ul li').click(function() {//方法 });

  8. (1)若当前字符不是大于0的数字字符,则复制该字符于新字符串中; (2)若当前字符是一个数字字符,且它之后没有后继字符,则简单地将它复制到新字符串中; (3)若当前字符是一个大于0的数字字符,并且还有后继字符,设该数字字符的面值为n,将它的后继字符重复复制n+1次到新字符串中; (4)以上述一次变换为一组,在不同组之间另插入一个"_"用于分割(5))若字符串中包含有下划线'_',则变换为 \UL

    package b; import java.util.Scanner; public class Zifuchuan { public static void main(String[] args) ...

  9. 为所有的Ul下的li标签添加点击事件

随机推荐

  1. JVM问题诊断常用命令:jinfo,jmap,jstack

    1.jinfo 描述:输出给定 java 进程所有的配置信息.包括 java 系统属性和 jvm 命令行标记等. 用法: jinfo [ option ] pid jinfo [ option ] e ...

  2. [ An Ac a Day ^_^ ] CodeForces 586C Gennady the Dentist 模拟

    题意: n个小朋友去拔牙 每个小朋友在拔牙的时候会哭 哭声是vi分贝 距离门口vi远的小朋友听到了哭声会害怕 他们的勇气值p会减少d 如果勇气值p小于等于零 他们就会在门外哭并立即离开拔牙队列(回家找 ...

  3. eclipse启动Heritrix

    首先下载heritrix-1.14.4-src源码.可以在http://sourceforge.net/projects/archive-crawler/files/archive-crawler ( ...

  4. 杭电1002 Etaoin Shrdlu

    Problem Description The relative frequency of characters in natural language texts is very important ...

  5. 调用Lua出错

    错误提示:Could not load file or assembly 'lua51' or one of its dependencies. An attempt was made to load ...

  6. stm32按键识别

    刚写了一个关于stm32单片机的按键识别的程序.目的,同时识别多个按键,并且不浪费cpu的时间. 关于去抖动,以前以为是在按键的时候,手会抖动.通过程序验证,这个确实是误解.这个应该是防止意外干扰.以 ...

  7. grub4dos新手指南-2

    Grub4dos 新手指南 一.GRUB4DOS的配置文件Grub4dos 有三个文件,grldr.grldr.mbr和menu.lst,配置文件是menu.lst,和GRUB一样.该文件一般放在和启 ...

  8. javaWEB总结(3):ServletConfig对象

    1.首先找到ServletConfig的API: ServletConfig封装了servlet的配置信息,并且可以获取servletContext对象. ServletConfig共有四个方法: 1 ...

  9. /usr 的由来及/usr目录结

    /usr 的由来及/usr目录结构   本文转自Delectat.com讨论中,大部分观点认为: usr 是 unix system resources 的缩写: usr 是 user 的缩写: us ...

  10. cmstop框架中的js设计content.js

    控制cmstop框架中action的js 内容模块 找出当前页面的js的思路01先找显示页面的当前文件.在页面文件中-->找(编辑,删除)按钮-->找获取这个按钮的js选择器 02看加载的 ...