html基础 - 浮动float

1.元素的浮动属性float

选择器{float：left(左浮动) /right(右浮动) /none(不浮动)}

为什么要使用浮动？

1. 早期作用：图文环绕

2. 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

3. 任何让div块级元素排成一行：可以使用display：inline-block，但是div之间的空隙会空一格，float的使用可以做到没有空隙

特点：

1. 浮动元素会脱标，在标准流中不占位置

2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 找边缘才停止，顶部对齐

5. 浮动的元素只会影响下面的标准流，不会影响上面的标准流

6. 浮动元素具有行内块元素的效果：① 一行可以显示多个 ② 可以设置宽高

7. 一浮全浮(兄弟元素)，兄弟元素只要有一个浮动，其他的兄弟都要加浮动

8. 浮动的元素经常搭配标准流的父元素一起使用

注意点： 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

1. clear属性清除浮动

选择器{clear：left(清除左侧浮动) /right(清除右侧浮动) /both(清除两侧)}

为什么要清除浮动？

清除浮动是清除浮动带来的负面影响。

因为子元素浮动了，脱离标准流，不再占用之前的位置，导致无法撑开没有设置高度的父元素。

浮动的父元素高度为0，进而导致后续结构直接跑上来，所以我们要清除掉这种负面影响

清除浮动的方法：
1.直接父元素设置高度：内容不确定的情况下不建议设置高度

2.额外标签法：<div style=”clear:both”></div> //在父元素的最后加一个块级元素

3.单伪元素清除法：推荐使用，只需要给浮动的父元素添加clearfix这个类名即可让父元素自动检测高度

      .clearfix::after {

        content: '';

        display: block;

        clear: both;}       /* 核心代码 */

4.双伪元素清除法：比较麻烦

    .clearfix::before,.clearfix::after {content: '';display: table;}

    .clearfix::after {clear: both;}

5.直接给父元素设置 overflow : hidden

3.overflow属性清除浮动

这个属性定义溢出元素内容区的内容会如何处理

由于clear只能清除两侧的浮动，遇到一些特殊的浮动需要用到overflow，如对子元素设置浮动，如果不对其父元素定义高度，则子元素的浮动会对父元素产生影响。

overflow：hidden则可清除对该元素的影响。 //必须在父元素设置在

overfolw属性还可以用在修剪盒子内容不溢出

选择器{overflow：属性值}

单行文本溢出显示点点点.... ：

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

visible	内容不会修剪会溢出元素框之外
hidden	内容会修剪。不会溢出元素框
auto	根据需要产生滚动条(上下)
scroll	始终显示滚动条(上下和左右)

overflow-x

裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话：

overflow-x: visible|hidden|scroll|auto|no-display|no-content;