浮动

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


  二.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 浮动以后元素脱离文档流,会对周围元素产生影响,必须在它的父级上添加清除浮动的样式

 

posted @ 2018-06-21 08:32  辰日天  阅读(72)  评论(0编辑  收藏  举报