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

解决办法: 
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. [ An Ac a Day ^_^ ] [kuangbin带你飞]专题四 最短路练习 POJ 3259 Wormholes

    SPFA求负环 模板题 记得每组处理之前clear vector /* *********************************************** Author :Sun Yuef ...

  2. 如何将编译出来的images拷贝到windows下面刷机

    由于SPRD的刷机工具ResearchDownload运行在window环境下:这样,我们平时在开发环境下编译出来的镜像文件就不能直接用于刷机了. 这里涉及到一个双系统中文件共享的方法.由于企业信息安 ...

  3. Bug(案例)图片的垂直出现隐藏

    这个案例是一个出Bug的案例,很抱歉本人没有找到bug在哪,但是功能却实现了. <!DOCTYPE html> <html> <head> <meta cha ...

  4. php 正则表达式 数组

    正则表达式 斜杠代表定界符 /^$/ $str = "好厉害18653378660了hi请勿嫁得好15165339515安徽dah矮冬瓜 拍行业大概啊好广东也欺负偶怕哈";$reg ...

  5. caffe层解读系列-softmax_loss

    转自:http://blog.csdn.net/shuzfan/article/details/51460895 Loss Function softmax_loss的计算包含2步: (1)计算sof ...

  6. Gitlab 安装配置

    Gitlab 很好的替代Github,可以安装到公司的内网服务器 进行管理 ,可以分布式的管理,集中的管理 下面介绍安装这个软件的步骤 其实安装很简单的  按照官网可以安装 https://about ...

  7. QC使用中问题点汇总

    QC 使用中问题点汇总,包括以下四个方面: 1.不兼容IE7,IE8的问题(服务器端设置) 2.无法在Win 7下正常下载页面(客户端设置) 3.在QC中填写中文内容后无法正常提交到数据库(客户端设置 ...

  8. linux文件特殊属性介绍（s，s，t）

    文件的权限有rwx这3个读.写.执行的权限.但是,怎么 /tmp权限有些奇怪?还有, /usr/bin/passwd也有些奇怪,怎么回事呢? [root@linux ~]# ls -ld /tmp ; ...

  9. Stsadm 导入导出子站点

    SharePoint通过stsadm备份和还原子网站(不是网站集)   大家都知道SharePoint的stsadm命令提供了很多便捷甚至是唯一的操作方法! 这里列出的所有命令:http://www. ...

  10. flash检测网络是否通畅

    air: 要在 Adobe ® Flash ® Professional(CS4 或更高版本)中使用 air.net 包: 选择“文件”>“发布设置”命令. 在 Flash 面板中,单击 Act ...