资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/清除浮动 or 闭合浮动

清除浮动 or 闭合浮动

oysun / 2443人阅读

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

为什么要清除浮动

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

父元素 靠子元素撑起来

清除浮动 clear:both

</>复制代码 
  1. 清除浮动
  3.     
  4.         
  5.     
  6.     
  7.         
  8.     
  10. // 伪元素 :after
  11. .clear:after{
  12.     clear:both;
  13.     content:".";
  14.     display:table;
  15.     width:0;
  16.     height:0;
  17.     visibility:hidden;
  18. }

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

父级元素不设置 height

</>复制代码 
  1. 子元素 float:left
  2. 额外增加元素 clear:both 
</>复制代码 
  2.     
  3.     
  4.

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

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

</>复制代码 
  2.     
  3.     
  4.

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

</>复制代码 
  2.     
  3.

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

</>复制代码 
  2.     
  3.
云服务器 GPU云服务器 清除浮动 html浮动向上浮动 上下浮动 左右浮动

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

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

相关文章

  • 清除浮动 or 闭合浮动

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

    n7then 评论0 收藏0

  • 清除浮动 or 闭合浮动

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

    BingqiChen 评论0 收藏0

  • css浮动现象及清除浮动的方法

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

    Kyxy 评论0 收藏0

  • css浮动现象及清除浮动的方法

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

    weakish 评论0 收藏0

发表评论

登陆后可评论

0条评论

oysun

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<