html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)
浮动子div撑开父div的几种方法:
(1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该div不设置任何样式,只用来清除浮动
(2)在父div的css样式中设置overflow:hidden;zoom:1;
(3)设置父div也为浮动元素float:left;,这样设置的坏处是不能用margin:auto;实现居中
(4)设置父元素display:inline-block;,这样设置的坏处是不能用margin:auto;实现居中
(5)在父div中添加<br clear="both">子元素
(6)给父元素引用clearfix样式(未试过)
clearfix{
zoom:1;
}
clearfix:after{
content:"";
display:block;
claer:both;
}
小结:用哪一种方法根据自身情况来使用。
参考原文地址:http://www.jb51.net/css/173074.html
http://www.jb51.net/article/43261.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas画印章</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="divCss">
<div class="style"></div>
<div class="style"></div>
<div class="style"></div>
<div style=" clear:both;"></div>
</div>
</body>
</html>
html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)的更多相关文章
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- 子div设置浮动无法把父div撑开。
<div class="mainBox"> <div class="leftBox"></div> <div clas ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- 子div设置float后会导致父div无法自动撑开
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...
- div+css之清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象,可以通过清除浮动的方法来解决浮动的影响. 浮动的清理(clear): 值:none:默认值.允许两边都可以有浮动对象:l ...
- css中子元素浮动,无法自动撑开父元素的解决办法
<div> <div style="float:left;">left</div> <div style="float:righ ...
- div的浮动、清除浮动和布局
总结: 1.无序列表去除前面的小点点:list-style-type: none; 2.设置左浮动的间距. 外边距:margin :如果设定4个值就是,上右下左的顺序设置 如果设置3个值,那么左和右边 ...
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
随机推荐
- Java 性能优化技巧及实战
关于Java代码的性能优化,是每个javaer都渴望掌握的本领,进而晋升为大牛的必经之路,但是对java的调优需要了解整个java的运行 机制及底层调用细节,需要多看多读多写多试,并非一朝一夕之功.本 ...
- 单点登录SSO的实现原理
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...
- 【转】PyDev for Eclipse 简介
转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-pydev/index.html PyDev for Eclipse 是一 ...
- Linux中查看系统资源占用情况的命令【转载】
用 'top -i' 看看有多少进程处于 Running 状态,可能系统存在内存或 I/O 瓶颈,用 free 看看系统内存使用情况,swap 是否被占用很多,用 iostat 看看 I/O 负载 ...
- sso笔记
C:\Windows\System32\drivers\etc\hosts SSO:单点登录 1.使用Cookie解决单点登录 技术点: 1.设置Cookie的路径为setPath("/&q ...
- Win7 下安装RabbitMQ
RabbitMQ依赖erlang,所以先安装erlang,然后再安装RabbitMQ; 下载RabbitMQ,下载地址: rabbitmq-server-3.5.6.exe和erlang,下载地址:o ...
- [CSS] Targeting Elements with CSS Attribute Selectors
Beyond classes and IDs CSS also provides selectors to target element based on their attributes. In t ...
- JavaEE SSH框架整合(三) struts2 异常、http错误状态码处理
struts2的action可能出现訪问不到,或action报异常等情况,所以须要作一些处理,给用户一个友好的印象. 1. 异常处理 result声明在action中 <action name ...
- Java基础知识强化之集合框架笔记55:Map集合之HashMap集合(HashMap<Integer,String>)的案例
1. HashMap集合(键是Integer,值是String的案例) 2. 代码示例: package cn.itcast_02; import java.util.HashMap; import ...
- c#不重复的排序方法
public int getRandom(int num) { Thread.Sleep(5); // Random ro = new Random(unchecked((int)DateTime.N ...