转自http://www.du52.com/text.php?id=362

当设计网页时，如果内部div全部设置css属性float为左右浮动，那么外部div将不能包裹内部div

解决方法

1.在内部div最后面加入一个不浮动元素，强制外部div包裹内部div

<div class="out">

<div class="inner">a</div><div class="inner">a</div>

<div style="clear:both;"></div><!-- 加入不浮动元素 -->

</div>





2.设置外部div的css属性overflow:hidden;zoom:1;这里需要注意，zoom是IE6专有属性设置zoom是为了兼容IE6

外部div不能包裹内部div的问题的更多相关文章

  1. 关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  2. 外部盒模型大小固定 内部有边框div设置浮动时 缩放窗口内部div溢出的解决办法

    原因分析: chorme和firefox浏览器下当缩放窗口大小时,边框的计算宽度变大造成内部div宽度的计算宽度变大,外部div放不下内部div而溢出. 解决办法: 给内部div设置 box-sizi ...

  3. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  4. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  5. 内部div自动扩张剩余宽度

    <div id="container"> <div id="left">左边</div> <div id=" ...

  6. css 父div如何包裹带有float属性的子div,float子div如何撑开父div

    来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

  7. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  8. div内嵌p,div等块元素出现的问题

    div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...

  9. jquery 实践操作：div 动态嵌套(追加) div

    此片记录在指定 div 中动态添加 div html(): append(): 在被选元素的结尾(但仍在元素内部)插入指定的内容. 语法: $(selector).append(content); / ...

随机推荐

  1. Json对象转为实体对象

    Json对象转为实体对象 1.Bean中申明 trainTypeList: public class TrainTypeQueryParam implements Serializable { pri ...

  2. Codeforces Round #345 (Div. 2) C （multiset+pair ）

    C. Watchmen time limit per test 3 seconds memory limit per test 256 megabytes input standard input o ...

  3. linux-柔性数组

    柔性数组:在C99定义的结构体中,最后一个元素允许是未知大小(或者是0)的数组,它不占用结构体任何内存,这个数组叫做柔性数组,柔性数组前必须至少有一个其它成员. 使用方式: #include<s ...

  4. stout代码分析之三：Option类

    为了安全表示NULL, stout实现了Option类.Option对象有两种状态: enum State { SOME, NONE, }; 其中SOME表示非空,NONE表示为空.可通过isSome ...

  5. Leetcode 557. 反转字符串中的单词 III

    1.题目描述 给定一个字符串,你需要反转字符串中每个单词的字符顺序,同时仍保留空格和单词的初始顺序. 示例 1: 输入: "Let's take LeetCode contest" ...

  6. Makefile的简单使用

    led.bin: led.o arm-linux-ld -Ttext 0x0 -o led.elf $^ arm-linux-objcopy -O binary led.elf led.bin arm ...

  7. 前后端分离中，gulp实现头尾等公共页面的复用 前言

    前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...

  8. 如何写出高性能DOM？

    为什么要写高性能DOM? 一个网站,在页面上承载最多内容的就是DOM,而且无论是我们通过加载JS.加载图片,他们也是通过写HTML标签来实现的.而我们性能优化要做的无非就是几大块: 站点的网络消耗 D ...

  9. android AsyncTask介绍 AsyncTask和Handler对比

    1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可 ...

  10. jedis,spring-redis-data 整合使用，版本问题异常

    jedis,spring-redis-data 整合使用,版本不匹配的时候经常会报一些异常,例如1: java.lang.NoClassDefFoundError: org/springframewo ...