关于CSS浮动
2017-02-08 23:51
211 查看
关于浮动理解
浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前,远离页面边缘的一端是后。
(以上是查阅的资料)
个人总结:
A.当父元素div的高度没有设置时(即靠父元素div中的子元素撑开父div),如果子元素的最后一个div是浮动的,那么父元素紧挨着的另一个div是紧跟着父元素的。
清除浮动
清楚浮动可以理解为打破横向排列。A.方法一:
清楚浮动的关键字是clear:
clear:none|left|right|both
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
注意:对于CSS的清除浮动(clear)只能影响使用清除的元素本身,不能影响其他元素。
B.方法二:
同时设置width:100%(或固定宽度)+overflow:hidden;
C.方法三:(推荐使用)
在父元素中添加以下样式:
.clearfix:before,.clearfix:after{display:table;content:”“;}
.clearfix:after{clear:both;}
.clearfix{zoom:1} /(兼容ie 触发haslayout)(推荐)*/
*即需要清除浮动时,给父元素添加一个名为“clearfix”的class选择器,将上述样式添加到公共样式中就好。
相关文章推荐
- 关于css浮动的一些理解
- 关于CSS浮动的影响
- 关于css浮动的一些总结
- 关于css浮动问题
- 关于CSS浮动float属性的了解及清除浮动的方式
- 关于CSS浮动与绝对定位
- 关于CSS浮动与绝对定位的个人感悟,看完这篇文章能得到很多相关问题的解释
- 十分推荐的一篇关于CSS浮动的博文
- 关于CSS浮动原理的探究
- 关于Delphi中预编译指令的使用方法
- 关于精简BDE的一点疑问----我的几封信
- 关于Windows中ActiveX控件注册
- 关于在linux下磁盘定额的实现
- 关于fvwm2的简单配置
- 关于制作 Linux 自启动光盘
- WIN32汇编: 5.学习更多的关于文本的知识
- 关于用VC,VB进行图像数据(二进制大对象)存储数据库的一点心得
- 关于Out Of Memory 的绝版回答
- 关于WEB应用程序的打印组件开发初探