第七章 浮动

Posted 2020-11-19 tongchaofei

  一.标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

  二.display属性

   display:更改块级元素和行内元素的相互转换
            block：块级元素的默认值
            inline：行内元素的默认值
            inline-block:同时具有行内和块级元素的特性
            none：隐藏元素内容

        三.float浮动

         left 元素向左浮动
   right 元素向右浮动
   none 默认值。元素不浮动，并会显示在其文本中出现的位置
   <style type="text/css">
    .layer01{
     float: left;
    }
    .layer02{
     float: right;
    }

   </style>

  四.clear清除浮动

   left 在左侧不允许浮动元素
   right 在右侧不允许浮动元素
   both 在左、右两侧不允许浮动元素
   none 默认值。允许浮动元素出现在两侧
   <style type="text/css">
    .layer01{
     clear:left;
    }
    .layer01{
     clear:right;
    }
    .layer01{
     clear:both;
    }
   </style>

  五.解决父级边框塌陷的方法

   1.浮动元素后面加空div
    <div class="layer05">
    <style type="text/css">
     .layer05{
      clear: both;
     }

    </style>

   2.设置父元素的高度
    <style type="text/css">
     #father{
      height: 500px;
     }
    </style>

   3.父级添加overflow属性
    visible 默认值。内容不会被修剪，会呈现在盒子之外
    hidden 内容会被修剪，并且其余内容是不可见的
    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
    <style type="text/css">
     #father{
      overflow: hidden;
     }
    </style>

   4.父级添加伪类after
    <div id="father" class="clear"></div>
    <style type="text/css">
     .clear:after{
         content: ‘‘;          /*在clear类后面添加内容为空*/
         display: block;      /*把添加的内容转化为块元素*/
         clear: both;         /*清除这个元素两边的浮动*/
     }
    </style>

  六.inline-block和float的区别

   display:inline-block
   可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
   位置方向不可控制，会解析空格
   IE 6、IE 7上不支持
   float
   可以让元素排在一行并且支持宽度和高度，可以决定排列方向
   float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式