HTML笔记06--浮动第一章

float --浮动 一

1.啥叫浮动？

【使元素向左或向右移动,其周围的元素也会重新排列】简言之，就是让盒子并排。

通过float定义浮动

未浮动样式代码如下：

  div{
       margin: 50px auto;
       width: 100px;
       height: 50px;
 border: 1px solid #34f5f8;
     line-height: 50px;
     text-align: center;
      }
  .left{
     border: 1px solid red;
       }
  .right{
 	border: 1px solid deeppink;
        }

未浮动图

左浮动-----float：left；

代码：

div{float:left;}//div盒子左浮动

左浮动图

代码：

div{float:right;}//div盒子右浮动

右浮动图

脱离文档流：

在css中，让一个盒子脱离标准文档流，常用三种方式

1.让盒子浮动；2.让盒子绝对定位；让盒子固定定位。

让盒子浮动后，盒子将失去在标准文档流中的特性，盒子就不再区分是块元素还是行内元素

块元素

在标准文档流下，块元素默认宽度是容器的宽度

当盒子浮动，盒子的默认宽度将是内容的宽度（跟行内元素相似，默认没有了宽度），但是我们可以手动的设置盒子的宽高

行内元素

在标准文档流下，行内元素默认无法设置宽高（设置宽高失效，想设置要转化盒子）

当盒子浮动，行内元素是可以设置宽高的（跟块元素相似，设置宽高生效），我们可以手动设置他们的宽高

因此，当盒子浮动，即具有行内元素特征，由具有块元素特征，因此就不再区分行内元素或者是块元素，并且

修改display是无效的

。

依次贴边

默认盒子会按照序列排序，如果盒子前面有兄弟元素，盒子将紧贴它的兄弟元素；如果没有。盒子将帖边（帖在父元素的边上）

也就是说，如果一行容不下该元素，该元素会自动进入下一行，找到能够容下它的位置，然后渲染

例如老四，直接贴在老二上了

如果继续往下找，发现下一行能够容下它，它会渲染，即使上边有多余的空隙（能够容下它），他也不会钻进去，所以说他受他前面一个元素的影响