【清浮动的方法】
来源:互联网 发布:mac flv 编辑:程序博客网 时间:2024/04/30 11:22
【清浮动的方法】
清浮动的方法
清浮动的两种情况:
1.父级没有高度时,父级的高度是由子元素撑开的,但子元素浮动后,父元素的高度无法被撑开,所以需要清浮动;
2.新加入的兄弟级标签,希望不受之前浮动元素的影响,则需要清浮动。
清除浮动的五种常用方法:
1.空标签清浮动
给空标签设置clear : both;
优点:简单易懂,容易掌握;
缺点:会出现大量无语义的空标签,不利于维护。
补充:clear清浮动
书写方式——clear : left / right / none / both;
left : 左侧不允许有浮动元素;
right : 右侧不允许有浮动元素;
none : 允许浮动元素在两侧;
both : 不允许浮动。
2.<br>标签清浮动
<br>标签自带属性:<br clear = "all" />;
优点:比空标签清浮动方式语义性较强;
缺点:结构与样式未分离。
3.父级设置overflow
原理:让父级能够紧贴其内容,实现清浮动;
overflow:hidden | auto ;
hidden:超出内容隐藏;
auto:默认属性,在需要时剪切内容并添加滚动条;
优点:不存在结构和语义化问题;
缺点:hidden在内容增多时会导致内容被隐藏;
auto在多个嵌套后,有时会造成内容全选;
4.子级元素浮动,父级元素也浮动
优点:不存在结构和语义化问题,代码量少;
缺点:使得与父级相邻的元素的布局会受影响。
5.after伪元素清浮动
原理:相当于用一个高度为0的块来代替空标签;
.clearfix : after {
display: block;
clear: both;
height: 0;
content: “\200B”;
}
优点:结构语义化正确,代码量少;
缺点:盒模型属性已改变。
伪元素的特性
伪元素after和before的特性
两个伪元素会在页面元素之前或之后插入一个元素
伪元素在页面中生成的元素是行元素
伪元素after和before兼容
.test : before, .test before {}
.test : after, .test after {}
说明:一个是冒号分隔,一个是空格分隔。
前者兼容IE8+及其它现代浏览器;后者兼容IE6/7。
- 清浮动的方法
- 【清浮动的方法】
- CSS清浮动的6种方法
- HTML/CSS 清浮动的方法
- 详谈BFC与清浮动的方法:
- CSS清浮动方法
- css清浮动方法
- 有效清浮动方法
- 浮动特性以及部分清浮动方法
- CSS"清浮动"-相关方法
- 清浮动常见方法总结
- 第三课 | 第二节 | 清浮动的方法
- 【CSS】清浮动的10种方法与利弊分析
- 关于清浮动的几种方法及注意事项
- 浮动及清浮动的方式
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- maven项目热部署到tomcat服务器
- Ognl表达式内部原理---总结
- Ubuntu 开机自动挂载NTFS分区
- webpack与gulp的区别及实例搭建
- CSDN日报20170511 ——《开发人员的必备技能》
- 【清浮动的方法】
- 数据库事务和事务隔离级别
- 思考什么
- Java自带线程池和队列详细讲解
- 5-66 N个数求和 (20分)
- getIntersectionNode 解题报告
- dubbo服务端xml文件有红叉解决办法
- curl: (60) SSL certificate: unable to get local issuer certificate 解决方法
- 类似三角形数的一般推导公式