有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

为什么要清除浮动,清除浮动的四种方式方式

代码编程 cat 12个月前 (10-19) 34次浏览 已收录 0个评论 扫描二维码

原因-浮动脱离文档流~
问题(即产生的景响):
父元素高度塌陷(无法撑开父元素的高度-背景、边框不能正常显示)
景响它之后元素布局
解决(即清浮动的方法):
1.给父元素固定高度
不够灵活

2.给父元素加overflow:hidden;/scroll/auto
可能会将益出部分隐藏或显示滚动条

3.在浮动元素之后加一个[空的]:[不浮动][块],元素{clear : both}
导致结构冗余

4.利用:after的元素替代方案3中的div【推荐】

给父元素加.clearfloat

.clearfloat:after {
            content:"";
            display: block;
            clear: both;
            height:0;
            line-height:0;
            font-size:0;
            overflow : hidden;
        }

1.浮动脱离文档流(不占原来位置)
2.提升层级(浮动元素和普通元素产生重叠区域时,浮动覆盖普通元素)

3.浮动可以使行内元素支持宽高(生成了一个块级框)
4.可以使未定宽度的块元素适应内应
5.浮动元素本身包含浮动子元素不会出现高度塌陷的问题

6.浮动元素不会出现margin值塌陷间题
7.浮动会引起文本绕排(文字、行内元素)

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址