CSS——float属性备忘笔记
通过指定CSS属性float
的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。
使用Float样式,如果没有清除浮动,那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动,此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说:当一个元素是浮动的,如果没有关闭浮动时,其父元素不会包含这个浮动元素,因为此时浮动元素从文档流中脱离。
所以需要在样式定义的后面进行清除浮动,清除浮动的方法有几种:
1.Clear:both清除浮动
clear清除浮动主要是借用clear属性来清除浮动,这是一种比较陈旧的清除浮动方法,但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动,我们需要在需要清除浮动地方的后面紧接着增加一个额外元素,比如说一个div标签,并且定义他们的样式为“clear:both”,其通常使用的结构方式如下:
<div class="demo A"><div class="demoB demoFloat">float left</div><div class="demoC demoFloat">float right</div><div class="demoD demoFloat">not float</div><div class="clear"></div>
</div>
.clear {clear:both;/*主要使用这个属性来清除浮动*//*为了不让ie具有一定的空间,个人建议加上下面三个属性*/height: 0;line-height: 0;font-size: 0;}
2.使用overflow
用overflow方法来清除浮动相对来说比较简单,只需要在有浮动的元素上面加上下面的属性:
.A {overflow: auto;zoom: 1;/*在IE下触发其layout,也要以使用_height:1%来代替zoom*/}
使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以。
对于overflow属性清滁浮动我们还可以这样应用:
.A {overflow: auto;/*除IE6以及其以下版本不识别之外,其他浏览器都识别*/}* html .A {height: 1%; /* IE5-6 */}
3.clearfix方法
这种方法清除浮动是现在网上最拉风的一种清除浮动,是利用:after和:before来在元素内部插入两个元素块,从而达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而clearfix利用其伪类clear:fix在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法:
HTML Code:
<div class="demo A clearfix"><div class="demoB demoFloat">float left</div><div class="demoC demoFloat">float right</div><div class="demoD demoFloat">not float</div></div>
使用clearfx来清除浮动最主要掌握一点,需要在有浮动元素的父元素中加入一个叫clearfix的class名称,比如说我们这个例子,我们需要在div.A中加入一个clearfix的class名。接着在给这个clearfix加上样式
.clearfix:before,.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;}.clearfix:after {clear: both;}.clearfix {zoom: 1;} /* IE < 8 */
其实只使用clearfix:after就可以达到清除浮动的效果,但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,所以为了让浏览器兼容这个clearfix的清除浮动,在原来的基础上加止clearfix:before,这样就解决了跨浏览器的兼容问题。
在这么多种清除浮动的方法中,都没有离开最原始的clear:both方法,特别是clearfix:after清除浮动,完全就是clear:both的一种变身,区别在于不需要在html增加一个标签,而只需要在有浮动元素的父元素中加上一个clearfix的class名,这样就轻松解决了清除浮动的问题。
转载于:https://www.cnblogs.com/pangblog/p/3290069.html
CSS——float属性备忘笔记相关推荐
- java之yield(),sleep(),wait()区别详解-备忘笔记
java之yield(),sleep(),wait()区别详解-备忘笔记 1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如 ...
- 多列网页布局CSS float 属性和 CSS Clear 属性
CSS float 属性 CSS float 属性用于设计多列网页布局.如果你想设计两列或三列的网页布局,你必须在float 属性的帮助下浮动你的 div 元素. div 标签是块级元素,因此,div ...
- 详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
- Win10:系统重装、优化、必备软件——备忘笔记
Win10:系统重装.优化.必备软件--备忘笔记 重装系统 无U盘--电脑能正常开机 U盘PE--电脑无法开机 Win10优化 必装软件 重装系统 推荐镜像下载地址:MSDN:www.xitongku ...
- html float属性both,CSS——float属性及Clear:both备忘笔记
通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间.CSS的float属性,作用就是改变块元素对象的默认显示方式,HTML标签设置了 ...
- html中的float属性,css float属性 图解float属性的点点滴滴
正确使用CSS的float属性可能会变成一项艰巨的任务,它涉及内容过多,浏览器兼容性问题也很多.它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容.本文包含的实施例的应用属性float说 ...
- css float属性作用和排布规则
#css 浮动(float) css浮动float属性,指的是元素的排布方式. 假设我们在使用浏览器浏览网页的时候,如果网页上的内容单向排布,就会导致,偌大的浏览窗,就只能看到稀稀疏疏几个内容,浏览体 ...
- css float属性
出处:http://luopq.com/2015/11/08/CSS-float/ float故名思议就是浮动,设置了float的元素会根据设置属性值向左向右浮动,并且会脱离文档流,也会使元素生成一个 ...
- Webkit Flex伸缩盒模型属性备忘
一个元素被定义display:-webkit-flex;则此元素即为伸缩盒模型中的伸缩容器,其包含的子元素是伸缩项目. flex是一个复合属性.Flexbox伸缩布局盒模型中的伸缩容器及伸缩特性定义. ...
最新文章
- 小脑过度活跃,会引起整个大脑的问题
- 全球 MEDC 2007 举行日期
- Java构建工具, ZeroC ICE, word2vec
- 防止ASP.NET按钮多次提交的办法
- java 泛型应用,通用返回类,泛型方法,泛型静态方法
- C++之判断当前是debug还是realease
- Java 实现图片合成 (com.google.zxing)
- Java整合ORC识别验证码
- 乱舞三国java_真.乱舞三国-江山美色
- 软件工程的标准定义:什么是软件工程?
- 业余羽毛球爱好者提高球艺16条法则
- 「干货」从动态的角度分析DDR的时序结构
- linux ssh motd 颜色,ubuntu ssh登录的时候motd被打印了两次
- Linux开发环境部署
- pr文字转语音有插件吗_Premiere pro 视频字幕的急速制作方法(语音转字幕)
- 【图文详解】一文全面彻底搞懂HBase、LevelDB、RocksDB等NoSQL背后的存储原理:LSM-tree 日志结构合并树...
- XTransfer外贸收款账户是如何收费的?
- (二)改掉这些坏习惯,还怕写不出优雅的代码?
- 元账户层是进入Web3元宇宙的传送门
- MySQL—取当前周/下周/下下周的起始和结束时间
热门文章
- python教学反思_Python第3课if教学反思:准备充分承上启下,优化内容模式初显
- 3d stroke插件下载_推荐一款好用的PS 3D地图插件,PS插件3D Map Generator ,一键生成地图神器...
- python怎么保存数据框转置结果_python – 如何转置pandas数据帧以交叉制表保存所有值的数据帧...
- linux 窗口z order,wxPython窗口z-order设置
- 计算机组装人员的职责,自控设备组装员
- java查询结果自定义显示_JPA自定义对象接收查询结果集操作
- linux firefox xvfb,自动化测试之linux+xvfb+selenium+firefox+python测试环境搭建与测试
- Linux镜像如何添加驱动,安装virtio驱动(Linux)
- 用友u8计算机配置,用友软件环境配置要求!
- 神经网络基础:(3)神经网络整体架构