父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)
浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现。但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题:
1.浮动的元素会相对于父容器或者是前面已经定位的元素进行浮动,浮动的元素脱离文档流,也就是不再占有原有的位置,会影响后面的元素或者是父容器。
2.父容器正常情况下会自动扩高,但是子元素加了浮动后位置不保留,父容器就感觉它不存在了,所以不会扩高。
所以,在编写静态网页时,一定要注意浮动的清除问题,一段清除浮动代码可以方便调用:
.clearFloat:after{
content:' ';
display:block;
height:0;
visibility:hidden;
}
.clearFloat{
zoom:1;
}
父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)的更多相关文章
- 【lombok】使用lombok注解,在代码编写过程中可以调用到get/set方法,但是在编译的时候无法通过,提示找不到get/set方法
错误如题:使用lombok注解,在代码编写过程中可以调用到get/set方法,但是在编译的时候无法通过,提示找不到get/set方法 报错如下: 解决方法: 1.首先查看你的lombok插件是否下载安 ...
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!
BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...
- css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
- 关于CSS中清除浮动的方法
在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...
- css浮动布局,浮动原理,清除(闭合)浮动方法
css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...
随机推荐
- YYHS-string(线段树)
题解 这道题给你两个操作,一个升序,一个降序 我们可以观察到这个字符串都是由小写字母组成的,只有26个字符,所以我们开一个26个字符的线段树 每次查询的时候找到这个区间内'a'到'z'的数量,再判断一 ...
- Linux入门(13)——Ubuntu16.04下将图片和pdf互转
Ubuntu16.04下将图片和pdf互转 将图片转为PDF: convert 图片 PDF convert pic.jpg pic.pdf 将PDF转为图片: convert PDF 图片 conv ...
- 如何利用Oracle VM Templates 在几分钟内部署Oracle Real Application Clusters (RAC)
本文未经授权,禁止一切形式的转载.如果对本文有任何疑问可以通过以下方式和我交流: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiang ...
- Go语言中slice使用注意事项
Go 语言中的slice类型可以理解为是数组array类型的描述符,包含了三个因素: 指向底层数组的指针 slice目前使用到的底层数组的元素个数,即长度 底层数组的最大长度,即容量 因此当我们定义一 ...
- 浅析Java源码之ArrayList
面试题经常会问到LinkedList与ArrayList的区别,与其背网上的废话,不如直接撸源码! 文章源码来源于JRE1.8,java.util.ArrayList 既然是浅析,就主要针对该数据结构 ...
- Python 数据分析Windows环境搭建
1. 下载相应的Python软件并安装 python-3.6.0-amd64 2. 配置相应的环境变量path ;C:\Users\Administrator\AppData\Local\Progr ...
- poj 3340 Barbara Bennett's Wild Numbers(数位DP)
Barbara Bennett's Wild Numbers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 3153 A ...
- Nginx Location 匹配
location匹配命令 ~ #波浪线表示执行一个正则匹配,区分大小写~* #表示执行一个正则匹配,不区分大小写^~ #^~表示普通字符匹配,如果该选项匹配,只匹配该选项,不匹配 ...
- html5 postMessage解决跨域、跨窗口消息传递[转载]
原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...
- JAVA 的关键字 、
关键字: 被JAVA语言赋予特定含义的单词, 特点: 组成关键字的单词的字母全部小写 注意: A:goto 和 const 是保留字 B: 类似于Notepad++ 这样的高级记事本,针对关键字有特殊 ...