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 ...
随机推荐
- android消息处理机制之2handler与looper,MessageQueue:的关系
// Looper: 在UI主线程里面有默认有一个Looper对象来管理UI线程的各条消息,但是在自定义的实现Thread的消息循环和消息派发,缺省情况下Thread是没有这个消息循环的既没有Loop ...
- 【原创】js中利用cookie实现记住密码功能
在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...
- SDUTOJ 3312
题目描述 给出一个n*n的矩阵,矩阵中只有0和1,现在有两种操作: 1 x y 将第x行第y列的数字改变(0变1,1变0) 2 x1 y1 x2 y2求由左上角(x1,y1)到右下角(x2,y2)组成 ...
- 第二章:Posix IPC
2.1:概述 以下三种类型的IPC合称为“Posix IPC”: Posix消息队列 Posix信号量 Posix共享内存区 Posix IPC在访问它们的函数和描述它们的信息上有一些类似点.本章讲述 ...
- python之redis
Redis简单介绍 如果简单地比较Redis与Memcached的区别,大多数都会得到以下观点:1 Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,zset,hash等数据结构 ...
- CyclicBarrier和CountDownLatch的差别
CyclicBarrier和CountDownLatch都用多个线程之间的同步,共同点:同时有N个线程在 CyclicBarrier(CountDownLatch) 等待上等待时,CyclicBarr ...
- CentOS 7 安装、配置、使用 PostgreSQL 9.5及PostGIS2.2
学习CentOS下安装使用PostgreSQL [安装过程] 1.添加RPM yum install https://download.postgresql.org/pub/repos/yum/ ...
- FreeSWITCH中文语音包
一.中文语音资源的获取 官方提供的资源:http://files.freeswitch.org/releases/sounds/ 自己录音 实在不行可以@我给你发一份. 二.中文资源的安装 英文资源的 ...
- 根据多年经验整理的《互联网MySQL开发规范》
一.基础规范 使用 INNODB 存储引擎 表字符集使用 UTF8 所有表都需要添加注释 单表数据量建议控制在 5000W 以内 不在数据库中存储图⽚.文件等大数据 禁止在线上做数据库压力测试 禁⽌ ...
- Android DisplayMetrics类获取屏幕大小
DisplayMetrics public class DisplayMetrics extends Object java.lang.Object ↳ android.util.Disp ...