布局知识之float

float,浮动,它最初是为了制作类似报纸上文字环绕图片效果而引入的。现在它常常用于布局。

浮动元素margin是有效的。
浮动元素margin是有效的
比如上图中的margin-top: 10px

float会产生2个问题,1、设置一个元素浮动后,后面的元素也会上来,造成元素重叠。2、父元素的塌陷。当子元素设置了浮动后,父元素的高度是0(不会计算浮动元素的高度)。

解决这2个问题的方式分别是:
1. 清除前面兄弟元素浮动
2. 闭合子元素的浮动

清除前面兄弟元素的浮动

也就是在后面一个元素上设置clear:both来消除浮动元素对它的影响。

<div style="float:left;width:100px;height:100px;"</div>
<div style="clear:both"></div>

上面的代码会让后面的盒子在浮动盒子的下面,不会重叠了。css2.0时代,clear:both的原理是给下面盒子自动加一个margin-top刚好撑到浮动盒子下方。css2.1后,它引入了一个清除区域(clearance)的概念,将盒子撑下来,clearance = 浮动元素高度 - 该盒子的 margin-top。所以让浮动元素和后面元素产生间隙的方式是给浮动元素添加margin-bottom。

闭合子元素的浮动

有2种方法:
1. 给最后一个元素设置clear: both
2. 给父元素新建一个 BFC(块格式化上下文)

给最后一个元素设置clear:both

但是这样会新增一个无用元素,造成了冗余。
现在通常是设置父元素的:after来解决这个问题。

.clearfix:after{
    content: '';
    display: table;
    clear: both;
}
// bootstrap 4清除浮动的方法
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

新建 BFC

该方法的原理是:父元素在新建一个 BFC 时,其高度计算时会把浮动子元素的包进来。

既然新建一个 BFC 可以解决父元素高度坍陷问题,那就好办了,下面这些都可以创建一个 BFC :

  • 根元素或其它包含它的元素
  • 浮动 (元素的 float 不是 none)
  • 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 inline-blocks (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 块元素具有overflow ,且值不是 visible
  • display: flow-root

虽然有这么多方法可用,可我们常用的就是 overflow: hidden,代码如下:

<div class="container">
    <div class="box"></div>
</div
.container {
    overflow: hidden;
}
.box {
    float: left;
}

常见float布局技巧

  1. 多栏布局,子元素给固定宽度和float:left
  2. 流式布局
<div>
    <main class="main">
        <div class="content"></div>
    </main>
    <aside class="left"></aside>
    <aside class="right"></aside>
</div>

.main{
    width: 100%;
    float: left;
}
.content{
    margin: 0 200px;
}
.left{
    width: 200px;
    float: left;
    margin-left: -100%;
}
.right{
    width: 200px;
    float: right;
    margin-left: -100%;
}

网格布局系统

网格布局系统是将一行分成n列,然后给元素设置浮动,margin。

比如常见的960 12格布局如下:

.container{
    width: 960px;
    margin: 0 auto;
}
.grid_1{
    margin-left: 10px;
    margin-right: 10px;
    float: left;
}
.grid_1{
    width: 60px;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注