<div class="mainBox">
  <div class="leftBox"></div>
<div class="rightBox"></div>
<div class="clear"></div>
</div>

注意:leftBox和rightBox设置浮动之后脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父div撑开。

解决的方法:

①可以给父div也设置高度为300px,使页面中的leftBox和rightBox看起来“好像”还在原来的位置;
②定义一个类选择器,并设置clear:both;清除浮动,同时为了解决IE6中div有高度的问题可以增加属性height:0;overflow:hidden;
.mainBox
{
width:960px;
margin:0 auto;
background-color:#CFF;
overflow:visible;
}
.leftBox
{
width:740px;
height:300px;
background-color:#C9F;
float:left;
}
.rightBox
{
width:210px;
height:300px;
background-color:#FCF;
float:right;
}
.clear
{
clear:both;
height:0;/*解决IE6下有高度的问题*/
overflow:hidden;
}

  

/*父元素不设置高度,子元素是有高度的,会把父元素撑开*/

/*如果子元素设置浮动的话,就脱离了文档流,就不会把父元素撑开了*/

/*因此,子元素设置浮动,父元素需要设置高度*/

  

子div设置浮动无法把父div撑开。的更多相关文章

  1. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  2. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  3. 同级div设置display:inline-block,父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  4. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  5. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. 子DIV块中设置margin-top时影响父DIV块位置的解决办法?

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  7. css-子div设置margin-top后,父div与子div一起下移

    根据海玉的博客 这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 再说 ...

  8. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  9. html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)

    浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...

随机推荐

  1. 《如何使用Javascript判断浏览器终端设备》

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. va ...

  2. 【从零开始学BPM,Day1】工作流管理平台架构学习

    [课程主题] 主题:5天,一起从零开始学习BPM [课程形式] 1.为期5天的短任务学习 2.每天观看一个视频,视频学习时间自由安排. [第一天课程] Step 1 软件下载:H3 BPM10.0全开 ...

  3. Android Weekly Notes Issue #235

    Android Weekly Issue #235 December 11th, 2016 Android Weekly Issue #235 本期内容包括: 开发一个自定义View并发布为开源库的完 ...

  4. WebStorm 2016 最新版激活(activation code方式)

    WebStorm 2016 最新版激活(activation code方式) WebStorm activation code WebStorm 最新版本激活方式: 今天下载最新版本的WebStorm ...

  5. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  6. Spring Quartz实现任务调度

    任务调度 在企业级应用中,经常会制定一些"计划任务",即在某个时间点做某件事情 核心是以时间为关注点,即在一个特定的时间点,系统执行指定的一个操作 任务调度涉及多线程并发.线程池维 ...

  7. Chrome插件(Extensions)开发攻略

    本文将从个人经验出发,讲述为什么需要Chrome插件,如何开发,如何调试,到哪里找资料,会遇到怎样的问题以及如何解决等,同时给出一个个人认为的比较典型的例子——获取网页内容,和服务器交互,再把信息反馈 ...

  8. your password has expired.to log in you must change it

    今天应用挂了,log提示密码过期.客户端连接不上. 打开mysql,执行sql语句提示密码过期 执行set password=new password('123456'); 提示成功,但客户端仍然连接 ...

  9. C++ std::forward_list

    std::forward_list template < class T, class Alloc = allocator > class forward_list; Forward li ...

  10. [转] STM32各种时钟的区别

    [原创]:http://m.oschina.net/blog/129357 我在原创的基础又从另一位博主处引用了一些内容. 时钟系统是处理器的核心,所以在学习STM32所有外设之前,认真学习时钟系统是 ...