2018-09-14css浮动

浮动

文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

清除浮动

父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）

使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}

清除浮动的使用方法：

.con2{... overflow:hidden}
或者
<div class="con2 clearfix">

css中font的一种简写方式：

字体/行高

浮动的时候，浮动顺序还是按文档中的来，文档中先出现的先浮动，后出现的后浮动
因为浮动了，所以被转换成了行内块元素，自动支持宽和高
浮动的子元素，无法撑开父级的高度；父元素要给高度，给多少就高多少
这个时候需要清除浮动。清除浮动有三种方式（1）在父级加overf：hidden （2）在最后一个子元素后面加一个空的div，给style样式属性clear：both （3）最常用的方式：

既可以消除塌陷，也可以清楚浮动

代码奉上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
        .con,.con2{
            width: 300px;
            /*height: 300px;*/
            border: 1px solid #000;
            margin: 100px auto 0;
            font-size: 0

        }
        .con a{
            width: 50px;
            height: 50px;
            display: inline-block;
            background-color: gold;
            font-size: 16px;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
        }
        .con2 a{
            width: 50px;
            height: 50px;
            display: inline-block;
            background-color: gold;
            font-size: 16px;
            margin: 10px;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            float: left;
        }
        .con2{
            /*height: 300px;*/
            /*overflow: hidden;*/
        }
        /*.clearfix:after{
            content: "";
            display: table;
            clear: both;
        }*/
        .clearfix:before,.clearfix:after{
            content: "";
            display: table;

        }
        .clearfix:after{
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }

    </style>
</head>
<body>
    <div class="con">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        

    </div>

    <div class="con2 clearfix">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <!-- <div style="clear: both"></div> -->

    </div>
</body>
</html>

效果展示：

含有before和after

浮动的时候没有行内块元素的间隙
浮动的时候，元素转换为行内块元素，但是和行内块元素还是有区别的（1）不会因为代码换行产生间距（2）有浮动的特性，往左靠或者往右靠

2018-09-14css浮动

浮动

推荐阅读更多精彩内容