CSS float 父元素高度自适应
<html>
<head><title></title>
<style type="text/css">
*{margin:0 ;padding:0;}
.content{
border:1px solid red;
}
.fl{float:left}
</style>
</head>
<body>
<div class="content">
<div class="fl" >1</div><div class="fl">2</div>
</div>
</body>
</html>
结果如下:
class 拥有float的属性已经脱离正常的文档流,所以父元素中相当于没有正常文档流填充。高度为0,我们想让父节点高度自适应float元素的高度。
要在父元素里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .content{ overflow:hidden; zoom:1; margin:5px auto;}
CSS float 父元素高度自适应的更多相关文章
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- css控制元素高度自适应
可以采用元素定位 + padding 的方式使特定元素高度自适应. css 样式: html,body{ height:100%; margin:; padding:; } .wrap { heigh ...
- float浮动导致父元素高度坍塌的原因及清除浮动方法
一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- CSS父元素高度随子元素高度变化而变化
<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...
- float浮动之后高度自适应失效解决方案
float浮动之后高度自适应失效解决方案 >>>>>>>>>>>>>>>>>>>> ...
- CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
随机推荐
- ASP.NET Core如何在ActionFilterAttribute里做依赖注入
在ASP.NET Core里,我们可以使用构造函数注入很方便地对Controller,ViewComponent等部件做依赖注入.但是如何给过滤器ActionFilterAttribute也用上构造函 ...
- maven 依赖优化
1.mvn dependency:list 列出项目用到的依赖 2.查看依赖树 mvn dependency:tree 3.mvn dependency:analyze Used undeclare ...
- linux_problem
今日自学遇到两个问题:火狐浏览器显示安全错误,按照国内网站上抄来抄去的解决办法并没有解决我的问题,即,每次访问新的网站都会提示"support mozilla.org 的管理员...&quo ...
- ssh密码登录+ Google Authenticator 实现双向认证
通常我们直接通过ssh输入密码连接服务器,但这样很容易出现暴力破解情况,所以我们可以结合google的动态认证+ssh密码,这样能够大大的提升登陆的安全. 简单来说,就是当用户通过ssh登陆系统时,先 ...
- Modbus 协议-Ascii,RTU
Modbus 协议之 Ascii 下载地址:http://download.csdn.net/detail/woxpp/5043249 1.提供Modbus Ascii 相关发送与接收代码 2.提供M ...
- 『炸弹 线段树优化建图 Tarjan』
炸弹(SNOI2017) Description 在一条直线上有 N 个炸弹,每个炸弹的坐标是 Xi,爆炸半径是 Ri,当一个炸弹爆炸 时,如果另一个炸弹所在位置 Xj 满足: Xi−Ri≤Xj≤Xi ...
- 一. jmeter
1.性能测试概述 1.1 主要方向是测试系统在一定负荷压力下,系统的响应时间,吞吐量,稳定性,系统的可扩展性等性能指标. 结合应用的架构和实现细节找出问题,并最终确认问题得到解决的过程. 目的: 1. ...
- Computer Networking: A Top Down Approach
目录 Chapter 1: Computer Networks and the Internet 1. What is the Internet? 2. The Network Edge 3. The ...
- 当前标识(IIS APPPOOL\DefaultAppPool)没有对“C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files”的写访问权限
找到或增加这个目录,给他增加权限.
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...