html中怎么让div撑开,html中子div用了浮动怎样让父div的大小自动撑开（清除浮动）...

浮动子div撑开父div的几种方法：

(1)在父div中在添加一个清除浮动的子div

(2)在父div的css样式中设置overflow：hidden;zoom:1;

(3)设置父div也为浮动元素float：left；，这样设置的坏处是不能用margin：auto；实现居中

(4)设置父元素display:inline-block;，这样设置的坏处是不能用margin：auto；实现居中

(5)在父div中添加
子元素

(6)给父元素引用clearfix样式(未试过)

clearfix{

zoom:1;

}

clearfix:after{

content:"";

display:block;

claer:both;

}

小结：用哪一种方法根据自身情况来使用。

HTML5 Canvas画印章

.divCss{

position: relative;

width: 1024px;

height: auto;

border: 1px solid #999999;

margin:auto;

/*display:inline-block;*/

/*float: left;*/

/*overflow: hidden;

zoom:1;*/

}

.style{

position: relative;

width: 300px;

height: 400px;

float: left;

border: 1px solid #aaaaaa;

margin:10px;

}

解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

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

css浮动(folat)，清除浮动(clear)(另加两种清除浮动方式，总共三种清除浮动方式)

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

子div设置float后会导致父div无法自动撑开

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

div+css之清除浮动

当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...

css中子元素浮动，无法自动撑开父元素的解决办法

left

随机推荐

学习SpringMVC——拦截器

拦截器,顾名思义就是用来拦截的. 那什么是拦截,又为什么要拦截.对于Spring MVC来说,拦截器主要的工作对象就是用户的请求,拦截下来之后,我们可以在拦截的各个阶段悉心呵护[为所欲为].常见的比如 ...

UNIX网络编程-Select模型学习

1.相关接口介绍 1.1 select ---------------------------------------------------------------------- #include ...

Ifvisible.js – 判断网页中的用户是闲置还是活动状态

ifvisible.js 是一个跨浏览器.轻量级的方式,用户检查用户在浏览页面或正在与它进行交互.它可以处理活动状态,如在页面上空闲或活跃.您还可以使用 ifvisible.js 智能设置您的间隔,如 ...

paip.提升效率--僵尸代码的迷思

paip.提升效率--僵尸代码的迷思 僵尸代码是指你的代码库里被注释掉的那部分代码, 很少去使用它,就像僵尸一样, 看雷kill-the-zombies-in-your-code ========== ...

调试单片机内部扩展RAM

51单片机内部只有128字节的RAM(8051),而8052有256字节的RAM,低128字节RAM直接或间接寻址都可以,高128字节RAM与SRF特殊功能寄存器共用地址,SFR只能直接寻址,高128 ...

C# 实现磁性窗体

可以实现窗体的 吸附 移动 分离     using System; using System.Drawing; using System.Collections.Generic; using Sys ...

com.android.dex.DexException: Multiple dex files define(jar包重复引用) 错误解决

前段时间开始转入Android studio,不料果真使用时候遇到些错误,在此记下! 出现这个错误往往是在libs目录下有个jar包,然后在gradle文件中又引用了,即: 共同引用了. 解决方法: ...

BZOJ5206 JSOI2017原力(三元环计数)

首先将完全相同的边的权值累加.考虑这样一种trick:给边确定一个方向,由度数小的连向度数大的,若度数相同则由编号小的连向编号大的.这样显然会得到一个DAG.那么原图的三元环中就一定有且仅有一个点有两 ...

『转』VC++ webbrowser函数使用范例

/*============================说明部分================================= 实现一下函数需包含头文件 #include

thinkCMF----自定义配置调用

有些时候,需要在后台给网站一些其他的配置: 这个配置,一般都是通过修改代码实现的,ThinkCMF本身没有这个配置: 找到site.html 增加一个Group就可以: 在配置里面做相应的配置就可以: