前端开发CSS清除浮动的方法有哪些?
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动溢出,为了方式这个现象的发生,就需要对CSS样式进行处理,而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢?
一般使用clear属性清除浮动。但是要注意的是clear属性只能清除标记左右两侧浮动的影响,然而在网页开发时,经常会受到一些特殊的浮动影响,例如,对子标记设置浮动时,如果不对其父标记定义高度,则子标记的浮动会对父标记产生影响。使用clear属性并不能消除子标记浮动对父标记的影响。因此小编整理了三种清除浮动的方法:
1)使用空标记清除浮动
在浮动标记之后添加空标记,并对该标记应用“clear: both”样式,可清除标记浮动所产生的影响,这个空标记可以是<dv>、<p>、<hr/>等任何标记。
2)使用 overflow属性清除浮动
对标记应用 overflow:hidden”样式,也可以清除浮动对该标记的影响。这种方式弥补了空标记清除浮动的不足。
需要注意的是,在使用“ overflow: hidden”样式清除浮动时,一定要将该样式写在被影响的标记中。
3)使用after伪对象清除浮动
使用 after伪对象也可以清除浮动,但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用 after伪对象清除浮动时需要注意以下两点:1)必须为需要清除浮动的标记伪对象设置“height:0;”样式,否则该标记会比其实际高度高出若干像素。2)必须在伪对象中设置 content属性,属性值可以为空,如“content:””;”。
以上就是为大家分享的关于前端开发中CSS清楚浮动的方法。?前端技术相对后台编程更容易入门,而前端开发工程师职业发展以及就业薪资非常稳定。
前端开发CSS清除浮动的方法有哪些?的更多相关文章
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- CSS清除浮动float方法总结
使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- CSS清除浮动各种方法
当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...
- CSS清除浮动的方法及优缺点
浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...
- css清除浮动float方法
转载:http://www.cnblogs.com/ForEvErNoME/p/3383539.html 什么是CSS清除浮动? 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
- css清除浮动各方法与原理
说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...
随机推荐
- 02 Django虚拟环境搭建
01 创建虚拟环境目录 该目录用于存放所有虚拟环境. cd / mkdir venv cd venv 02 创建当前项目的虚拟环境 virtualenv --python=/usr/bin/pytho ...
- python3读取、写入、追加写入excel文件
由于excel版本不同,python处理的时候选择的库页不同. 一.操作对应版本表格需要用到的库 1.操作xls格式的表格文件,需要用到的库如下: 读取:xlrd 写入:xlwt 修改(追加写入):x ...
- resample matlab实现
使用线性插值实现sample rate转换. function output = simpleResample(input, inputfs, outputfs) inputLen = length( ...
- 【HTML】三种方法使HTML单页面输入密码才能访问
方法一 <script type="text/javascript"> function password() { var testV = 1; var pass1 = ...
- 【Python】time库
- HDU1074 Doing Homework(状压dp)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1074 题意:给定有n门课的作业,每门课交作业有截止时间,和完成作业所花费的时间,如果超过规定时间完成,每超 ...
- 140. 单词拆分 II
Q: 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,在字符串中增加空格来构建一个句子,使得句子中所有的单词都在词典中.返回所有这些可能的句子. 说明: 分隔时可以重复使用字典 ...
- 关于Win32串口
因为近段时间接触Hid相对来说多一些,由此忽略了串口中获取cbInQue这个重要的东西,下面是错误代码 // Win32SerialPortLib.cpp : 定义 DLL 应用程序的导出函数. // ...
- CentOS 7防火墙快速开放端口配置方法
CentOS升级到7之后,发现无法使用iptables控制Linuxs的端口,baidu之后发现Centos 7使用firewalld代替了原来的iptables.下面记录如何使用firewalld开 ...
- 本地cmd连接远程mysql数据库
一.登录远程mysql 输入mysql -h要远程的IP地址 -u设置的MySQL用户名 -p登录用户密码 例如:mysql -h 192.168.1.139 -u root -p dorlocald ...