闭合浮动的方法css
浮动是一个有意思(你也可以说它很麻烦)的CSS属性,任何元素设置了浮动,层级就提高了,会影响它后面没设置浮动的元素,这些倒霉的被影响者会跑到浮动层的下面去(当然IE6、IE7除外),那解决方法呢?
常用清楚浮动方法
1、对父级设置适合CSS高度
2、新建子元素,再clear:both清除浮动
3、给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
4、父级设置display
:inline-
block
;
5、使用CSS的:after伪元素
.clearfix:after {
display: block;
clear: both;
height: 0;
font-size: 0;
content: '';
}
.clearfix {
*zoom: 1;
}
6、精益求精方法:
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }
详细好文章参考网址:http://www.jb51.net/css/67471.html
闭合浮动的方法css的更多相关文章
- 常用的CSS清除浮动的方法优缺点分析(个人学习笔记)
一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="di ...
- css浮动布局,浮动原理,清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
- CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)
css之浮动布局 本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- CSS 教程 - 闭合浮动元素
按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列. 因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素. 但是有时我 ...
- css清除浮动各方法与原理
说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
随机推荐
- .netcore webapi iis 虚拟目录下载apk文件
首先贴上微软的文档:https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files 参考网址:http://www.cnb ...
- 关于document的节点;用Dom2创建节点;
一.关于节点 1.节点树状图 document>documentElement>body>tagName 2.节点类型 元素节点(标签).文本节点(文本).属性节点(标签属性) 3. ...
- React-router4 第三篇 BasicURL ParametersRedirects (Auth) 谷歌翻译:重定向
依旧是地址 https://reacttraining.com/react-router/web/example/auth-workflow 上来一步走 先导入模块 import React, { P ...
- BOM心得
Brower Objects Model浏览器对象模型 ps: 到现在也没个正式标准.............. window是BOM的顶级对象,但一般可以省略 一.Location对象 相当于浏览器 ...
- AFNetworking HTTP响应头返回数据
//发送验证码 NSLog(@"发送验证码"); AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationM ...
- 在 Ubuntu 上使用微信客户端
原文地址: http://www.myzaker.com/article/5979115d1bc8e08c30000071/ 在这个快速信息交互时代,无论是工作还是生活,都需要频繁的网络社交,而在中国 ...
- Netty 源码 Channel(一)概述
Netty 源码 Channel(一)概述 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) Channel 为 Netty ...
- jvm 基础
1. JDK 包含 java 程序设计语言,JVM, Java API类库. java 开发最小环境 2. JRE : Java API类库中java se API 子集和java 虚拟机(HotSp ...
- Web应用获取文件路径的方法
拥有 HttpServletRequest req 对象 req.getSession().getServletContext().getRealPath("/") ----- ...
- nginx xxx.conf
server { listen 80 ; server_name xxx.test.cn localhost 127.0.0.1 115.29.96.222; access_log /var/log/ ...