子div设置浮动无法把父div撑开。

<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撑开。的更多相关文章
- 子div设置float后导致父div无法自动撑开的问题
子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...
- 子div块中设置margin-top时影响父div块位置的解决办法
在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...
- 同级div设置display:inline-block,父级div强制不换行
同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...
- CSS子元素设置margin-top作用于父容器?
CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...
- 子元素设置margin-top后,父元素跟随下移的问题
子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...
- 子DIV块中设置margin-top时影响父DIV块位置的解决办法?
解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...
- css-子div设置margin-top后,父div与子div一起下移
根据海玉的博客 这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 再说 ...
- 子div块中设置margin-top时影响父div块位置的解决办法及其原因
解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...
- html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)
浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...
随机推荐
- 手动导入swift三方danielgindi/Charts到OC工程中教程
1.到github网址上下载zip压缩包https://github.com/danielgindi/Charts 2.然后将解压后的文件夹整个拖到自己的工程文件夹下(很多教程只让拖xcodeproj ...
- SQL Server存储过程
创建于2016-12-24 16:12:19 存储过程 概念: 1.存储过程是在数据库管理系统中保存的.预先编译的.能实现某种功能的SQL程序,它是数据库应用中运用比较广泛的 一种数据对象. 2.存储 ...
- Linux基础介绍【第六篇】
定时任务crond介绍 crond是什么? crond是linux系统中用来定期执行命令或指定程序任务的一种服务或软件.一般情况下,安装完CentOS5/6 linux操作系统之后,默认便会启动cro ...
- org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): da.huying.usermanag ...
- Linux下的C Socket编程 -- server端的继续研究
Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...
- XSS 前端防火墙 —— 可疑模块拦截
上一篇介绍的系统,已能预警现实中的大多数 XSS 攻击,但想绕过还是很容易的. 由于是在前端防护,策略配置都能在源代码里找到,因此很快就能试出破解方案.并且攻击者可以屏蔽日志接口,在自己电脑上永不发出 ...
- Xamarin.Android-用ZXing实现二维码扫描以及连续扫描
一.前言 本文的内容有两个基础:ZXing.Net和ZXing.Net.Mobile ZXing.Net:ZXing的C#实现,主要封装了各种二维码的编码.解码等跨平台的算法 ZXing.Net.Mo ...
- Html5下拉控件同时支持文本输入和下拉代码
有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下: <!DOCTYPE htm ...
- CanvasWebgl项目介绍
CanvasWebgl 介绍 CanvasWebgl 是一个基于webgl 开发的2d绘图框架,使用TypeScript开发 CanvasWebgl的功能,是在屏幕空间 或者 3D空间产生一个画布 ...
- ValueInjecter----最好用的OOM(以微信消息转对象举例)
使用数据实体的好处我这里就不多说了,但大家享受这些好处的时候,难免也对那些琐碎的赋值代码感到厌烦,基于此,我认为掌握一个oom的使用,还是很有必要的. 这种类型的工具有很多,比如automapper, ...