盒子浮动

 
页面基本代码如下
<head>
    <style type="text/css">
        .box01,.box02,.box03{
             width:200px;
             height:200px;
             font:30px/200px 'Microsoft Yahei';  #字体大小，行高
             background-color:gold;
             text-align:center;
             margin:20px;
        }
    </style>
</head>
 
<body>
    <div class="box01">1</div>
    <div class="box01">2</div> 
    <div class="box01">3</div>
</body>

　　

 
效果如下

 

 
 
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种，就是往左或者右靠
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直margin的合并
 
 在上面页面的基础上演示浮动的特性
 
 
例子1，浮动基本作用
 
在源代码的基础上，增添如下类
<head>
...
.box01{
        float:left;
}
.box02{
        float:right;
}
.box03{
        float:left;
}
...
</head>

　　

 
基本效果图如下

 

 
 
例子2： 测试特性4，在body中新增代码如下
<body>
    ...
    #正常情况下，行内元素<a>是不能设置宽高的，但是这里发现效果和上面其他盒子一样
    <a href="#" class="box01">这是一个a元素</a> 
    ...
</body>

 

注意：使用浮动属性把行内元素变为行内块元素的情况下，这些行内块元素之间是没有间距的。　

 
 
 
 
例子3： 测试特性5，浮动文字绕图
<head>
    <style type:"text/css">
        .con{
            width:400px;
            height:400px;
            border:1px solid #000;
            margin:100px auto 0;
        }
 
        .pic{
             width:100px;
             height:100px;
             background-color:gold;
        }

       .duanluo{
             background-color:green;
             width:400px;
             color:white;
             height:200px
         }
 
</head>
 
<body>
    <div class="con">
    <div class="pic"></div>
    <div class="duanluo">
    "加上一些文本"
     ...
    </div>
    </div>
</body>

　　

 
此时盒子效果图如下

 

 
如果在.pic类中加入浮动特性
.pic:{
         ...
         float:left
         ...
}
 
新的效果如下，证实 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
   

 

 

 
 
例子4： 特性6，父元素内整体浮动的元素无法撑开父元素示例
 
<head>
    <style type="text/css">
    .con,.con2{
           width:300px;
           height:300px;  
           border:1px solid #000;
           margin:100px auto 0;
           font-size:0   #清除行内元素之间的默认间距
     }
 
 
    1. 把标签<a>转变为行内块元素
    .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;
     }
 
 
     2. 使用浮动标签实现1中同样效果
    .con2 a{
           width:50px;
           height:50px;
           float:left;
           background-color:gold;
           font-size:16px;
           margin:10px; #设置盒子自定义的间距
           text-align:center;
           line-height:50px;
           text-decoration:none;
    }
    </style>
</head>
 
<body>
    <div class="con">  #这里把con改为con2，实现的效果一样
        <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>
    </div>
</body>

　　

 

 
注意，如果.con，.con2中的height属性取消，2种方法的效果如下
(这里为了好看多加了4个<a>标签盒子）
   
 
也就是说在没有设置高度的情况下，行内块元素的方法可以根据内容自动撑开盒子，使用浮动属性的方法，盒子不能自动撑开。
 
解决方式有2种，也就是清除浮动
 
1. 父级上增加overflow:hidden，这里就是原代码基础上再加上如下
.con2{
         overflow:hidden;
}

　　

 
2. 使用成熟的清浮动样式类：clearfix，也就是再写一个类
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}
 
然后用在<div>标签中即可
<div class="con2 clearfix">

　　

复习：

它还有一个清除前面的clearfix，用来解决margin-top塌陷问题
.clearfix:before{
    content:"";
    display:table;
}

　　

 
这两个类其实可以合起来如下，统一使用
.clearfix:before,.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    zoom:1; #兼容IE，有些IE不支持clearfix:after，zoom:1表示网页不缩放，并且有清除浮动问题
}

　　

 
 
posted @ 2018-04-23 17:00  坚强的小蚂蚁  阅读(344)  评论(0)    收藏  举报