css消除浮动

float的使用即消除浮动

1、额外标签法

2、overflow清除浮动

3、after伪元素

4、双伪元素消除浮动  

（注：2 3 4给父类添加样式）

<div class="box clearfix">
            <ul>
                <li class="clear"></li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
</div>

1、额外标签法

.clear {
            clear: both;
        }

2、overflow清除浮动      

        必须添加给父元素 且无法显示溢出的部分

.box {
      overflow: hidden;
      }

3、after伪元素 父类中加clearfix双类名

 .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

4、双伪元素消除浮动 父类中加clearfix双类名

 .clearfix::before
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

css属性书写顺序

1、布局定位属性：display/position/float/clear/visibility/overflow

2、自身属性：width/height/margin/padding/border/background

3、文本属性：color/font/text-align/vertical-align/white-space/break-word

4、其他属性（CSS3）：content/cursor/border-radios