首页 > 网站 > WEB开发 > 正文

关于CSS浮动

2024-04-27 15:16:03
字体:
来源:转载
供稿:网友

关于浮动理解

浮动可以理解为让某个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选择器,将上述样式添加到公共样式中就好。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表