美文网首页
浮动元素高度问题

浮动元素高度问题

作者: nickNic | 来源:发表于2019-07-16 10:46 被阅读0次

一在标准流中内容的高度可以撑起父元素的高度
二在浮动流中内容的高度不可以撑起父元素的高度

三清除浮动方式1
1给前面一个父元素设置高度
注意点
企业开发中,能不写高度就不写高度,所以不太推荐

清除浮动方式2
给后面的盒子添加clear属性

clear属性
none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动右浮动找右浮动)
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:不要找前面的左浮动元素和右浮动元素
注意点
当给某个元素添加clear属性后,那么这个属性的margin就会失效

清除浮动方式3隔墙法
外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外的块级元素设置clear:both属性
注意点
外墙法可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性

内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外的块级元素设置clear:both属性
注意点
内墙法可以让第二个盒子使用margin-top属性
内墙法可以让第一个盒子使用margin-bottom属性

外墙法和内墙法的区别
外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度

在企业开发中不常用隔墙法来清除浮动

相关文章

  • 2017-02-21 CSS学习笔记 am

    浮动元素高度问题 在标准流中内容的高度可以撑起父元素的高度 在浮动流中浮动的元素是不可以撑起父元素的高度的 清除浮...

  • 清除浮动流

    浮动元素高度问题 在标准流中内容的高度可以撑起父元素的高度 在浮动流中浮动的元素是不可以撑起父元素的高度的 清除浮...

  • 浮动元素高度问题

    一在标准流中内容的高度可以撑起父元素的高度二在浮动流中内容的高度不可以撑起父元素的高度 三清除浮动方式11给前面一...

  • css布局—清除浮动的影响

    浮动存在的问题①浮动的元素不能撑高父亲,高度不能自适应②浮动的元素会影响后面浮动的元素例: 效果: …………………...

  • 清除浮动的几种方法

    清除浮动 盒子高度问题 在标准流中内容的高度可以撑起盒子的高度(父元素div被撑起来) 在浮动流中浮动元素内容的高...

  • 浮动元素引起的问题和解决办法

    一、问题 多个浮动的元素无法撑开父元素的宽度,父元素的高度可能会变成0。 若浮动元素后面跟非浮动元素,非浮动元素会...

  • CSS清除浮动

    浮动原理 浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素。 清除浮动:解决高度坍塌问题 方...

  • 浮动 float

    浮动定位 规则 浮动的问题 清理浮动的方法 设置父元素高度扩展性不好 让父元素浮动可能导致页面中的所有元素都浮动父...

  • day08--清除浮动的方式

    盒子高度问题 1.在标准流中内容的高度可以撑起父元素的高度2.在浮动流中浮动的元素是不可以撑起父元素的高度的 清除...

  • 清除浮动

    清除浮动和闭合浮动 区别:清除浮动虽然排版正确,但是,浮动元素的父元素的高度为空; 闭合浮动:闭合浮动后元素高度正...

网友评论

      本文标题:浮动元素高度问题

      本文链接:https://www.haomeiwen.com/subject/tybnkctx.html