学习布局（三）浮动

 引入reset.css：

@charset "UTF-8";
html{color:#000;background:#FFF;font-family:'Microsoft YaHei',sans-serif,Arial;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',sans-serif,Arial;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
a{text-decoration:none; color:#333; outline:none;}
a:hover{text-decoration:underline;}
var,em,strong{font-style:normal;}
em,strong,th,var{font-style:inherit;font-weight:inherit;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
.clearfix {*zoom: 1;}
.clearfix:after {content: '\200B';clear: both;display: block;height: 0px;}

可能被阻挡的浮动元素 ：

.wrap {
            width: 300px;
            border: 5px solid black;
        }

        .box1 {
            float: left;
            width: 150px;
            height: 300px;
            background-color: darkorange;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }

        .box2 {
            float: left;
            width: 150px;
            height: 200px;
            background-color: rebeccapurple;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }

        .box3 {
            float: left;
            width: 150px;
            height: 150px;
            background-color: chartreuse;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }

        .box4 {
            float: left;
            width: 150px;
            height: 150px;
            background-color: royalblue;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }

 

        
1
        
2
        
3
        
4
    

 两个方向的浮动：

      前两个子元素设置左浮动，后两个子元素设置右浮动，在浮动的过程中，左右浮动的元素不会相互影响、阻挡对方元素。

 

 .wrap {
            width: 600px;
            border: 5px solid black;
        }

        .box1 {
            float: left;
            width: 150px;
            height: 150px;
            background-color: royalblue;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }

       .box2 {
           float: left;
           width: 150px;
           height: 300px;
           background-color: firebrick;
           font-size: 40px;
           text-align: center;
           line-height: 150px;
       }

       .box3 {
           float: right;
           width: 150px;
           height: 300px;
           background-color: aqua;
           font-size: 40px;
           text-align: center;
           line-height: 150px;
       }

       .box4 {
           float: right;
           width: 150px;
           height: 200px;
           background-color: fuchsia;
           font-size: 40px;
           text-align: center;
           line-height: 150px;
       }

浮动小结:

•    float: left表示向左浮动，标签从右边向上浮起，再从右向左浮动到水槽左边。
•     float: right表示向右浮动，标签从左边浮起，再向右浮动到水槽的右边。
•    浮动过程中，如果遇到同方向的其他元素有可能会被阻挡。
•    浮动过程中，左浮动的元素和右浮动的元素不会相互影响、干涉、阻碍对方的行动。
•    在物理空间占用方面，左右浮动元素会相互影响。