HiDocs

浮动定位指：

将元素排除在普通流之外

元素将不在页面中占据空间

浮动的话，那么这个元素会浮动在整个页面层的最上层，并且无视其他（未浮动的）元素的存在，如果其下面有其他未浮动的元素会把这个元素遮住

css

#box>div:first-child{ /*外面div里面的第一个div*/
    width:200px;
    height:200px;
    background: green;
    /*左浮动的话，会把下面的child元素遮住*/
    float:right;
}
#box>div:nth-child(2){ /*里面的第二个div*/
    width:200px;
    height:200px;
    background: aqua;
    float:right;
}
#box>div:nth-child(3){ /*里面的第三个div*/
    width:200px;
    height:200px;
    background: red;
    float:right;
}

将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框（父div）之内

浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框（父div）或另一个浮动框（兄弟div等）的边框为止
浮动元素的外边缘不会超过其父元素（其紧挨着的上一级）的内边缘
浮动元素之间不会互相重叠
如果元素之间有冲突，地方不够用，那么大的会让着小的，大的会下移一行
浮动元素不会上下浮动（只会向左挤或者向右挤）
==任何元素（除了div之外的也可以，例如span）一旦浮动，display属性将完全失效，均可以设置宽高（原本没有宽高的span也可以设置宽高了），并且不会独占一行==
- 语法：float:none/left/right；

注：由于div的整行机制，那么会出现都为float：right时，呈现靠右的横向排列

都为float：left时，呈现靠左的横向排列

没有float时，呈现靠左的竖向排列

==如果设置了float的父元素没有设置宽高==：

==那么会根据子元素大小（而且是没有float属性的子元素）来自适应，刚好包裹住子元素，有float的子元素会根据float属性自动并到一行==

注：此时有一个策略就是：子元素设置了float后（有内容），如果想让父类包裹住子元素，那么给父类也加上float

如何让父元素在不设置宽高的情况下感知到有float的子元素？

overflow:hidden; 本来的意思是超出的元素隐藏，这里的意思是让父类去感知float子类的高度

float: right; 会把所有子类包裹住（并且是上下左右尽量都包裹住的那种）然后靠右，不管子类的float属性是什么方向

float: left; 会把所有子类包裹住然后靠左

除了这两种方法之外，就是直接设置父元素的宽高了

或者给子元素里面加内容（文字等）也可以：因为不管div有没有浮动，有没有宽高，只要里面有内容都会被撑起来

css

#box{
    background: deeppink;
    /*在不设置宽高的情况下，让父类可以感知子类的高度*/
    overflow:hidden;
    /*或float: right;*/
}

如果非float元素被float元素挡住了，想让非float元素完全显示出来怎么办？

清除覆盖它的float浮动元素：==清除浮动==：clear: both; clear:left; clear:right;

给该元素也设置浮动：float:left;或float:right;

css

#box>div:last-child{
    width:400px;
    height:400px;
    background: #000;
    /*清楚两边浮动*/
    clear: both;
    /*设置该元素左浮动*/
    /*float:left;*/
}

清除浮动

CSS 清除浮动：描述：清除浮动是在使用了浮动之后必不可少的，为了网站布局的效果，清除浮动也变得非常麻烦。

属性：clear 值：left、right、both

清除浮动的常用方式： 1.结尾处加空div标签 clear:both （或在下一个元素上加clear:both;） 2.浮动元素的父级div定义 overflow:hidden 3.浮动元素的父元素定宽高

清除浮动 ​

清除浮动