深入理解系列之 float

float的设计初衷:

仅仅是为了实现文字环绕效果

float的感性认知:

  1. 包裹性:
    1. 收缩:元素应用了float后,宽度收缩,紧紧地包裹住内容(即元素的宽度收缩到元素内的内容的宽度大小
    2. 坚挺:原来没有高度,但元素应用了float后,元素的高度突然扩展到内容的高度大小
    3. 隔绝:元素应用了float后,盒子里面的内容发生了任何事情,都与盒子外的内容无关(BFC)
  2. 破坏性:
    1. 子元素应用了float后,父容器塌陷:父容器的高度变为0

tips: 具有包裹性(BFC特性)的其他属性:
display: inline-block/table-cell
position: absolute/fixed/sticky
overflow: hidden/scroll
具有破坏性的其他属性:
display: none
position: absolute/fixed/sticky

清除float对其他元素所带来的影响:

  1. float元素底部插入一个带有 clear: both; 属性的元素

    1. 底部放置一个HTML block水平元素 -
    2. CSS after(IE8+)伪元素底部生成 - .clearfix:after
  2. 父元素BFC化(IE8+)或 haslayout(IE6/7)

BFC/haslayout的通常声明

  1. float: left/right
  2. position: absolute/fixed
  3. overflow: hidden/scroll(IE7+)
  4. display: inline-block/table-cell(IE8+)
  5. width/height/zoom: 1/...(IE6/7)

综上,IE8以上浏览器使用:

.clearfix:after {
        content: '';
        display: block;
        height: 0;
        overflow: hidden;
        clear: both;
    }

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: '';
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
}

.clearfix {
    *zoom: 1;
}

切记,.clearfix 只需应用在浮动元素的父级元素上 浮动的特性:

  1. 元素block块状化(砖头化)
  2. 破坏性造成的紧密排列特性(去空格化)

智能化自适应布局

<div class="container"><a href="#" class="left"><img src="url"/></a>
    <div class="right">很多其他内容</div>
</div>

.container {
    width: 600px;
    margin: auto;
}

.left {
    float: left;
    margin-right: 20px;
}

.right {
    display: table-cell;
    *display: inline-block;
    width: 2000px;
    *width: auto;
}
posted @ 2018-06-10 11:04  今天代码写完了吗  阅读(721)  评论(0编辑  收藏  举报