css2----清除浮动
为什么要清除浮动?
非IE下,当容器的高度为auto,容器有浮动元素,此时容器的高度不能自己伸长适应内容的高度,造成内容溢出乃至影响布局,即所谓的“浮动溢出”,为防此象,需要清除浮动。
如何清除浮动?
这里只记录最好的一种方法,伪元素和ie 触发haslayout:
.clearfix{zoom:1;}
.clearfix:after{content:"x";display:block;height:0;clear:both;visibility:hidden;}
a.给容器添加一个clearfix的class;
b.给这个class添加一个:after伪元素实现添加看不见的块元素
css2----清除浮动的更多相关文章
- 详解 清除浮动 的多种方式(clearfix)
说明 本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者! 1.什么是浮动 首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 : ...
- 清除浮动元素的margin-top失效原因(更改之前的错误)
//样式代码body,div{ margin:; padding:; } .box1{ background:#900; width:200px; height:200px; margin:20px ...
- 详说 CSS 清除浮动
转自:http://kayosite.com/remove-floating-style-in-detail.html 浮动,从诞生那天起,它就是个特别的属性——既为网页布局带来新的方法,却又随之产生 ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)
使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...
- [html/css]清除浮动的相关技巧
以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...
- 前端之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"& ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- css清除浮动深度解析
首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...
随机推荐
- Dynamics AX 2012 R2 创建一个带有负载均衡的服务器集群
安装额外AOS的主要目的,是将它添加到集群,或用于创建批处理服务器. 1.创建集群服务器 这里,Reinhard使用上节Install An Additional AOS 中创建的AOS,来创建集群. ...
- 页面缩放对css的影响
昨天发现一个上线的项目css样式明显不对,但是查看别人的电脑上的页面样式都是没问题的,于是找了半天原因,原来是我的浏览器对这个页面缩放了,导致样式问题. 发现了页面缩放会作用在同一个域名下的所有页面, ...
- hibernate映射的 关联关系:有 一对多关联关系,一对一关联关系,多对多关联关系,继承关系
hibernate环境配置:导包.... 单向n-1:单向 n-1 关联只需从 n 的一端可以访问 1 的一端 <many-to-one> 元素来映射组成关系: name: 设定待映射的持 ...
- [问题2015S04] 复旦高等代数 II(14级)每周一题(第五教学周)
[问题2015S04] 设 \(A\) 为 \(n\) 阶方阵, \(C\) 为 \(k\times n\) 矩阵, 且对任意的 \(\lambda\in\mathbb{C}\), \(\begin{ ...
- GZFramwork数据库层《三》普通主从表增删改查
运行结果: 使用代码生成器(GZCodeGenerate)生成tb_Cusomer和tb_CusomerDetail的Model 生成器源代码下载地址: https://github.com/Gars ...
- jquery之remove(),detach()方法详解
一:remove()方法 remove()函数用于从文档中移除匹配的元素. 你还可以使用选择器进一步缩小移除的范围,只移除当前匹配元素中符合指定选择器的部分元素. 与detach()相比,remove ...
- log4j2的使用
预备知识 日志级别:log4j默认六个级别,即trace.debug.info.warn.error.fatal ,对应意味着该消息为追踪.调试.普通信息.警告.错误.严重错误.可以根据需要子定义其他 ...
- Java 中的 static 使用之静态方法
与静态变量一样,我们也可以使用 static 修饰方法,称为静态方法或类方法.其实之前我们一直写的 main 方法就是静态方法.静态方法的使用如: 运行结果: 需要注意: 1. 静态方法中可以直接调用 ...
- Gradle build设置自动log开关
应用场景 通常情况下我们的apps发布后也就是release模式下log是不显示的,debug模式下是显示log的,但是在特殊情况下我们测试release包的时候需要log的时候,就无法使用Build ...
- java 滤镜实现
一句话,滤镜的实现就是对像素点(RGBA)进行再运算,输出新的像素点. F(r,g,b,a)=G(r,g,b,a); 这个公式包含四个变换,即RGB颜色空间中RGB三个分量的变换以及透明度Alh ...