浮动

display和浮动

• 块级元素：独占一行

  h1~h6  p  div  列表
  

  行内元素：不独占一行

  span  a  img   strong ...
  

  行内元素 可以被包括在 块级元素中，反之，则不可以

  • block元素特点：

    • 总是在新行上开始
    • 高度、行高以及外边距和内边距都可以控制
    • 宽度缺省是它的容器的100%，除非设定一个宽度
    • 它可以容纳内联元素和其他块元素

    行内元素：a span img 也叫内联单元、内嵌元素等，只能容纳文本或其他内联元素

    行内元素特点

    • 和其他元素都在同一行
    • 高，行高及外边距和内边距不可改变；
    • 宽度就是它的文字或图片的宽度，不可改变
    • 内联元素只能容纳文本或者其他内联元素

    属性 display: block 设置成块级元素; display: inline 设置成行内元素 display: inline-block 同时具有块元素和行内元素的属性

    display: none 不显示

  浮动：

      **float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。**
  

  <!--
      block 块元素
      inline 行内元素
      block-inline  是块元素，但是可以内联，在一行！
  -->
  <style>
      div{
          width: 200px;
          height: 100px;
          border: 10px solid yellow;
      }
      span{
          width: 200px;
          height: 100px;
          border: 10px solid bisque;
          display: block;
      }
  </style>
  

父级边框塌陷问题

• <!--  clear: right; 右侧不允许有浮动的元素
    clear: left;  左侧不允许有浮动的元素
    clear: both;  两侧不允许有浮动的元素
    clear: none;-->
  
    <style>
        div{
            margin: 0px;
            padding: 5px;
        }
        #img1{
            border: 1px #8fa1c7 dashed;
            display: inline-block;
            float: left;
        }
        #img2{
            border: 1px #d4af7a dashed;
            display: inline-block;
            float: right;
            clear: right;
        }
        #d1{
            border: 1px #455a81 dashed;
            font-size: 20px;
            display: inline-block;
            float: right;
        }
    </style>
  

解决方案：

1、增加父级元素的高度~

#father{    border: 1px #000 soild;    height:500px;}

2、增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{    clear:both;    margin: 0;    padding: 0;}

3、overflow

在父级元素中增加一个  overflow: hidden;

4、父类添加一个伪类： after

#father:after{    content: '';    display: block;    clear: both;}

小结：

1. 浮动元素后面增加空div

   增加，代码中尽量避免空div

2. 设置父元素的高度

   简单，元素假设有了固定的高度，就会被限制

3. overflow

   简单，下拉的一些场景避免使用

4. 父类添加一个伪类：after（推荐）

   写法稍微复杂一点，但是没有副作用，推荐使用！

OVERFLOW

<!--    overflow: scroll; 边框不足进行滚动-->
    <style>
        div{
            margin: 0px;
            padding: 5px;
        }
        #d0{
            width: 200px;
            height: 300px;
            overflow: scroll;
        }
        #img1{
            border: 1px #8fa1c7 dashed;
            display: inline-block;
            float: left;
        }
        #img2{
            border: 1px #d4af7a dashed;
            display: inline-block;
            float: left;
        }
        #d1{
            border: 1px #455a81 dashed;
            font-size: 20px;
            display: inline-block;
            float: left;
        }
    </style>

• display

  方法不可以控制

• float

  浮动起来的话可以脱离标准文档流，所以要解决父级边框塌陷问题~