清除浮动 or 闭合浮动

oysun 发布于2019-08-30 15:55 / 2202人阅读

摘要：为什么要清除浮动子元素脱离文档流会造成父元素塌陷撑不起来父元素靠子元素撑起来清除浮动清除浮动伪元素闭合浮动增加额外元素父级元素不设置子元素额外增加元素闭合浮动使用和其自身的属性注意不推荐使用的属性闭合浮动父元素设置闭合浮动父

为什么要清除浮动

子元素 float:left; 脱离文档流,会造成父元素塌陷(撑不起来)

父元素靠子元素撑起来

清除浮动 clear:both

清除浮动

    
        
    
    
        
    



// 伪元素 :after
.clear:after{
    clear:both;
    content:".";
    display:table;
    width:0;
    height:0;
    visibility:hidden;
}

闭合浮动 - 增加额外元素 clear:both

父级元素不设置 height

子元素 float:left

额外增加元素 clear:both

闭合浮动 -- 使用 br 和其自身的 html 属性

==注意== clear=all 不推荐使用的属性(moz)

闭合浮动 -- 父元素设置 overflow:hidden

闭合浮动 -- 父元素设置 display:table

专线服务私有云清除浮动 html浮动向上浮动上下浮动左右浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117439.html

清除浮动 or 闭合浮动

摘要：为什么要清除浮动子元素脱离文档流会造成父元素塌陷撑不起来父元素靠子元素撑起来清除浮动清除浮动伪元素闭合浮动增加额外元素父级元素不设置子元素额外增加元素闭合浮动使用和其自身的属性注意不推荐使用的属性闭合浮动父元素设置闭合浮动父为什么要清除浮动子元素 float:left; 脱离文档流,会造成父元素塌陷(撑不起来) 父元素靠子元素撑起来清除浮动 clear:both 清除浮动...

n7then 2019-08-23 15:32 评论0 收藏0
清除浮动 or 闭合浮动

摘要：为什么要清除浮动子元素脱离文档流会造成父元素塌陷撑不起来父元素靠子元素撑起来清除浮动清除浮动伪元素闭合浮动增加额外元素父级元素不设置子元素额外增加元素闭合浮动使用和其自身的属性注意不推荐使用的属性闭合浮动父元素设置闭合浮动父为什么要清除浮动子元素 float:left; 脱离文档流,会造成父元素塌陷(撑不起来) 父元素靠子元素撑起来清除浮动 clear:both 清除浮动...

BingqiChen 2019-08-02 14:23 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

Kyxy 2019-08-29 16:29 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

weakish 2019-08-02 11:19 评论0 收藏0
css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕 showImg(https://segmentfault.com/img/remote/1460000016137003?w=838&h=382); 再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不...

BearyChat 2019-08-05 14:49 评论0 收藏0