前端基础——浮动

1.块级元素同行显示

块级元素本身是可设置宽高，独自成行，若想将块级元素同行显示，有以下两个方法：
第一，采用行级元素和块级元素相互转换的方式

dispaly:inline-block

这种方法虽然能够使得块级元素同行显示，但是每个元素之间存在5px的间距，且对于某些浏览器来说存在兼容性的问题。
第二，则是采用浮动的方法

float:left|right|none

2.浮动的特点

相对于display来说：

• 元素之间没有间距；
• 不存在浏览器不兼容的问题；
• 多个元素同行排列时，排列不下会自动换行；

float本身的特性：

• 多个元素同时浮动时，第一个元素先找到父元素边界，其他依次去找前一个元素的边界
• 块级元素设置浮动后，如果没有设置宽度，那么宽度默认为auto，其宽度由内容决定

3.浮动对非浮动的影响

1. 标准文档流：在页面布局中，元素遵循从上到下、从左到右、块级元素独占一行、行级元素共享一行的排列规则
2. 脱离文档流：在页面布局中，不遵循标准文档流的规则。
3. 破坏文档流：在页面布局中，元素在移动过程中不遵循标准文档流的规范，移动完成后仍然是标准文档流

总结：float其实相当于占用的是浮在标准文档流元素上面的一层空间，与标准文档流元素的空间使用是相互独立的、不冲突的，因此会出现浮动元素覆盖在标准文档流上方的情况
影响：

• 当浮动元素覆盖在标准文档流上方时，文字会显示在浮动元素的外部，该特性可以实现图文混排，即文字环绕图片排列
  
• 子元素浮动，会造成父元素高度塌陷的问题
  注：子元素浮动起来之后，相当于在父元素的上面，若父元素没有设置高度，那么会出现高度塌陷的情况

4.如何清除浮动，解决高度塌陷问题

解决高度塌陷问题之后变成

.box_4::after{
    content: "";
    clear: both;
    display: block;
}

主要有以下四个方法：

• 给受影响的元素设置clear属性，left表示取消左浮动的影响

.box_2{
    clear:left 
}

• 在html中通过br属性将浮动与非浮动元素隔开

<div>box1</div>
<br clear="all">
<div>box2</div>

• 使用空盒子的样式设计

<div style="clear:both"></div>

• 给父元素添加伪元素选择器::after，取代空盒子的样式设计
  注意：因为after是行内元素，因此要转成div的块级元素

.clearfix::after{
    content:"";
    clear:both;
    dispaly:both;
}

注意：另外，overflow:hidden 也可以解决高度塌陷的问题，但是它实际没有清楚浮动，而是利用BFC容器的特性——该容器中的浮动不影响父元素的高度

额外知识点

1.文本超出部分用…表示？

必须含有四行代码，包括超出部分隐藏、设置为伸缩盒子、设置显示行数以及设置对齐方式。

overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertial;