浮动float

Posted 2020-08-07 学如逆水行舟，不进则退。

一、浮动定义：会强制改变display为inline-block，使元素排队列，（排列方式由属性值决定，left / rihgt）， 使该元素处于半脱离文档状态

二、浮动元素处于半飘离状态，能看到浮动元素的主要有文字和具有inline属性的元素，所以由此引发 一个问题，和一个应用

　　（1）一个问题：父容器无法看到子级浮动元素

　　　　　　解决方法：

　　　　　　　　方法一：出发css hack，改变渲染规则，常见的方法如下：

　　　　　　　　　　　　overflow:hidden;

　　　　　　　　　　　　position: absolute;

　　　　　　　　　　　　display: inline-block;

　　　　　　　　方法二（最标准方法）：after伪元素清除浮动（注意：ie6，7 不兼容伪元素的处理, *ie6、7能识别，_仅ie6能识别）

　　　　　　　　　　　　

<div class="wrapper">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>

 

.wrapper {
    width: 1000px;
    background-color: pink;
    *zoom: 1; /*解决ie6、7不兼容伪元素的问题*/
}
.content {
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}

　　（2）一个应用：实现图片的文字环绕效果

　　正常文字是和图片的底部对齐，通过设置图片float可以让文字从图片顶部开始对齐，实现文字包围环绕图片的效果，像报纸上排版类似

<img src="p1.jpg">

 

img {
    float: left; /*或right*/          
}