浮动以后父DIV包不住子DIV解决方案
转载自http://blog.sina.com.cn/s/blog_6c363acf0100v4cz.html
当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就是说DIV2在这里相当于浮在了页面上方,跟DIV1不在同一个层面,导致了DIV2无法把DIV1给撑开,这是一个老生常谈的问题,也是困扰很多刚接触DIV+CSS的朋友的一个问题。
先来看看这个问题的实际效果

这里本来DIV1是套在了DIV2的外面的,如果是使用表格做的话,那么DIV1肯定被撑开了,效果应该是如下所示
那如何解决这个浮动了之后无法把容器撑开的局面呢?解决的方法这里介绍2仲。
第一种:在浮动结束的容器后面加上这段代码
<div style=”clear:both;”></div>
意思是清除浮动。
第二种:在外层DIV,也就是这里的DIV1的CSS里面加入以下CSS代码
overflow: auto;
这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法,要养成一个习惯,在浮动应用完后消除浮动,这样后面的DIV就不会继承这个浮动(就像在编程的时候,在打开数据库,操作完后,要养成个习惯在后面把数据库关闭)。也就是说浮动这个东西会被继承,除非消除这个浮动,才不会让后面接着的DIV受到继承。其实不仅是DIV,其他的像P等其他的容器都会有继承的效应,大家要养成一个习惯记得要消除浮动。
浮动以后父DIV包不住子DIV解决方案的更多相关文章
- css实现遮罩层,父div透明,子div不透明
使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...
- IE6 7 父级元素的overflow:hidden 是包不住子级的relative
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 如何阻止div中的子div触发div的事件
<div class="sideFrame" v-on:click="hideside"> <div class="sideFram ...
- jQuery滚动广告 解决子div绝对定位与父div重叠引起的闪烁问题
这两天做了一个滚动广告栏的demo 功能有自动轮播 左右箭头移动 导航点选中图片移动效果 模仿的是新浪体育的广告 最难的问题就是子div绝对定位于父div 鼠标移入子div 系统会判定鼠标移出了父di ...
- 子div设置浮动无法把父div撑开。
<div class="mainBox"> <div class="leftBox"></div> <div clas ...
- 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
随机推荐
- Android的四大组件
Android的四大组件:Activity.Service.BroadcastReceiver.Content Provider. Content Provider 属于Android应用程序的组件之 ...
- arcgis android 通过getExtent得到当前地图范围四个点的坐标
困扰了我很久的问题终于要得到解决了,先欢喜一下.我的目的是想做一个当程序完全退出后,再次打开程序地图直接显示上次程序退出前地图的范围.arcgis for android官方软件就有这个功能.网上搜索 ...
- poj 1114 完全背包 dp
如果可以每个物品拿多件,则从小到大遍历,否则从大到小遍历. G - Piggy-Bank Time Limit:1000MS Memory Limit:32768KB 64bit IO ...
- hdu2159
#include<bits/stdc++.h> #define MAX 155 using namespace std; struct Node { int exp; int pat; } ...
- AutoMapper使用笔记
AutoMapper是一个.NET的对象映射工具. 项目地址:https://github.com/AutoMapper/AutoMapper. 帮助文档:https://github.com/Aut ...
- JDK的命令行工具
Jcmd:综合工具 jcmd -l 列出当前运行的所有虚拟机 参数-l表示列出所有java虚拟机,针对每一个虚拟机,可以使用help命令列出该虚拟机支持的所有命令 jcmd [pid] help j ...
- js:语言精髓笔记5----语言分类
计算模型:源于对计算过程的不同认识: 1.基于不同计算模型一般分为://教科书的一般分类 命令式语言: 函数式语言: 逻辑式语言: 面向对象程序设计语言: 2.基于程序本质分类: //编程的经典法则 ...
- 手持PDA智能条码扫描RFID打印POS机
手持PDA智能条码扫描RFID打印POS机 一.系统稳定性: 1.硬件稳定性: 采用了华为海思(国内唯一可以媲美全球顶级的CPU+射频方案厂商,可以和英伟达等一决高下)手机方案,CPU+射频浑然一 ...
- 解决EasyUI-Datagrid和LinqToEntity结合应用时排序问题
我们在做WEB页面时,时常会选择JQuery框架的Datagrid,如Ext.EasyUI.Flexigrid,数据访问则采用LinqToSQL或LinqToEntity.UI用Jquery框架的目的 ...
- CentOS 拷贝mysql数据库到新的硬盘报错了
服务器硬盘满了,加了一块,在目录 下新建了 mkdir /mysql cp -r /var/lib/mysql/* /mysql chown -R mysql:root /mysql 更改/etc/m ...