css浮动

作者: huhu502 | 来源:发表于2016-09-04 17:52 被阅读11次

一篇文章带你了解CSS clear both清除浮动
CSS浮动
css定位
CSS 定位
CSS 定位 (Positioning)
Test10
CSS定位
CSS盒子模型、定位、浮动
CSS clear both清除浮动
CSS之float,文档流,position详解

1）块级元素独占一行显示-->标准流的显示方式

   <style type="text/css">

    .one{
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;
    }
    .two{
        width: 100px;
        height: 100px;
        background-color: pink;
        display: inline-block;
        float: right;   浮动
    }
</style>
 </head>
<body>
    <div class="one"></div>
    <div class="two"></div>  
</body>

结果是：粉色的盒子在右边

-2）浮动的特点
1，设置了浮动的元素不在原来的位置，脱离了标准流。
2，可以让块级元素在一行显示，只要让它们的浮动都向左即可。浮动是顶部对齐。
3，浮动可以将行内元素转换为行内块元素。推荐还是使用display方法

3）浮动的作用
-->解决文字环绕问题
-->制作导航栏
-->网页布局
4）清除浮动
1，不是删除浮动
2，消除浮动的影响
-->当子元素设置了浮动，父元素又没有设置高度的时候，页面造成混乱，这种情况下要使用清除浮动
clear：left |right |both

第一种方式：

       <style type="text/css">

    /* css初始化 */
    *{
        margin: 0;
        padding: 0;
    }
    .content{
        width: 500px;
        /* height: 300px; */
        background-color: #1351EF;  
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: pink;
        float: left;
    }
    .right{
        width: 300px;
        height: 300px;
        background-color: green;
        float: left;
    }
    /* 清除浮动的盒子 */
    .clearfix{
        clear: both;
    }
    .footer{
        width: 500px;
        height: 50px;
        background-color: black;
    }
   </style>
  </head>
  <body>
    <!-- 主体盒子 -->
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>    清除浮动
    </div>
    <div class="footer"></div>
  </body>

第二种方式：当父盒子中没有定位的元素是才可以使用这种方式

 给复合子设置**overflow:** hidden;

第三种方式：使用伪元素清除浮动（最优的方式）

     <style type="text/css">

    /* css初始化 */
    *{
        margin: 0;
        padding: 0;
    }
    .content{
        width: 500px;
        background-color: #1351EF;
    }
    .left{
        width: 200px;
        height: 300px;
        background-color: pink;
        float: left;
    }
    .right{
        width: 300px;
        height: 300px;
        background-color: green;
        float: left;
    }
    .footer{
        width: 500px;
        height: 50px;
        background-color: black;
    }
    /* 清除浮动 */
    .clearfix:after{
        content: "";
        display: block;
        clear: both;
        line-height: 0;
        height: 0px;
        visibility: hidden;
    }
    .clearfix{
        zoom:  1; /* 为了兼容ie浏览器 */
    }
</style>
 </head>
<body>
    <!-- 加入clearfix -->
    <div class="content clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
</body>