Day29 - Float

Float

• float：用来将区块并排时可以使用，当设定浮动时，其父层会抓不到子层的高度
  • left：靠左浮动
  • right：靠右浮动
  • none：不浮动，预设值
  • inherit：继承父层(上层)的设定
• clear：当接下来不使用 float 时，会需要清除，不然会导致排版还在上层(抓不到高度)
  • left：消除左边的浮动
  • right：消除右边的浮动
  • both：消除左右两边的浮动，常用
  • none：不消除任何浮动，预设值
  • inherit：继承父层(上层)的设定
• 浮动前後父层的高度变化可参考
  • 清除浮动前：CodePen
  • 清除浮动後：CodePen
• 清除浮动的几种方法
  • 建一个空的 <div class="clearfix">，在 CSS 上设定
  • 写在 HTML 上，如 <div style="clear:both"></div>
  • 在父层利用 ::after 清除
  • 在父层加入 overflow: hidden;

可以观察 box1、box2 有无 float 的效果
之後把 box3 放入後应该会发现高度位置不对
把 clear 放入後，box3 可确实呈现在最下层

HTML

<div class="wrap">
    <div class="box1">b1</div>
    <div class="box2">b2</div>
    <!-- <div class="clearfix"></div> -->
    <div class="box3">b3</div>
</div>

CSS

.wrap {
    margin: 0 auto;
    width: 500px;
}

.box1 {
    width:200px;
    background: green;
    height:50px;
    float:left;
  }
.box2 {
    width:300px;
    background: gray;
    height:50px;
    float:left;
}
/* .clearfix {
    clear:both;
} */
.box3 {
    width:500px;
    background: blue;
    height:60px;
}

用父层的 ::after 清除

.wrap::after {
    content: '';
    display: table;
    clear: both;
}

过程遇到的小问题：在测试时想说不是用 ::after 清除了吗？怎麽 box3 一直没有往下移，清除浮动怎麽没有作用，有发现出什麽问题吗？

解 bug 过程：

• 一开始先检查是否错字，再逐一比对，最後连摆 CSS 的位置都确认了还是没动静
• 查网路跟例子，几乎都到清除就结束了，没有 box3 的配置
• 查 Chrome 开发者工具，在 ::after 的位置引起注意，怎麽 box3 没有在 ::after 的下面？
• 突然想到是在 wrap 後清除浮动，但是我的 box3 还包在 wrap 里啊！
• 之後把 box3 的 <div> 往下挪出 wrap 外，顺利呈现！

虽然是观念上的小问题，但也是花了我不少时间，提供参考

参考资料

• CSS-浮动定位(float)、清除浮动(clear)
• 清除float效果──CSS的clear属性
• 金鱼都能懂网页设计入门 : Float浮动 (铁人赛第九天)
• Day 16 | 欸！不要这麽浮动好不好

次回

即将完赛，做个结束罗！