CSS基础（二）浮动

全文手打，转载请注明出处

全文手打，转载请注明出处

全文手打，转载请注明出处

一）CSS浮动

浮动：使块级标签不独占一行，把多个块级标签排列在一行上。

float属性值：left    right    none(默认值不浮动)

<style>
  .wrapper {
    width:600px;
    margin:0 auto;      //居中
    border:1px solid #666;
  }
  .box1,.box2 {
    width:200px;
    height:150px;
  }
  .box1 {
    background-color:#f00;
    float:left;                                           //加浮动float后，可以使块级标签不独占一行
  }
  .box2 {
    background-color:#ff0;
    float:right;
  }
</style>


<div class="wrapper">
  <div class="box1">box1</div>             //div属于块级标签会独占一行
  <div class="box2">box2</div> 
</div>

 

二）浮动原理

让元素脱离文档流，不占有标准流

<style>
  .wrapper {
    width:600px;
    margin:0 auto;
    border:1px solid #666;
  }
  .box1,.box2,.box3 {
    width:200px;
    height:150px;
  }
  .box1 {
    background-color:#f00;
    float:left;                                         
  }
  .box2 {
    background-color:#ff0;
    float:right;
  }
  .box3 {
    background-color:#fff;//浮动后，后面的元素不管是块级元素还是行级元素，不会显示在下一行
  }
</style>


<div class="wrapper">
  <div class="box1">box1</div>            
  <div class="box2">box2</div> 
  <div class="box3">box3</div> 
</div>

 

三）清除浮动

目的：让后面的元素自动掉到下一行

方法一：添加空标签，并设置样式：

                 clear:left：清除左浮动

                 clear:right：清除右浮动

                 clear:both：清除左右浮动

                 clear:none：左右浮动都不清除

首选：方法二：要清除浮动的父级添加样式：overflow:hidden;

方法三：要清除浮动的父级添加伪元素 :after，并设置样式

                  父元素:after {

                      content:"";
                      display:block;
                      clear:both;

                  }

<style>
  .wrapper {
    width:600px;
    margin:0 auto;
    border:1px solid #666;
  }
  .wrapper:after {                  //方法三：父级添加伪元素
    content:"";
    display:block;
    clear:both;
  }
  .box1,.box2,.box3 {
    width:200px;
    height:150px;
  }
  .box1 {
    background-color:#f00;
    float:left;                                         
  }
  .box2 {
    background-color:#ff0;
    float:right;
  }
  .clear {
    clear:both;                      //方法一：清除浮动
  }
  .box3 {
    background-color:#fff;//浮动后，后面的元素不管是块级元素还是行级元素，不会显示在下一行
  }
</style>


<div class="wrapper">
  <div class="box1">box1</div>            
  <div class="box2">box2</div> 
  <div class="clear"></div>          //方法一：清除浮动
  <div class="box3">box3</div> 
</div>

<div class="wrapper" style="overflow:hidden;">      //方法二：父级添加样式
  <div class="box1">box1</div>            
  <div class="box2">box2</div> 
</div>
  <div class="box3">box3</div> 

 

四）练习：浮动布局

.info-show{
  width: 600px;          //实际开发不给高度
  padding: 20px;          //边框
  border: 1px solid #ccc;
  margin: 0 auto;
}
.head-sculpture{
  float: left;
  text-align: center;        //合二为一
  margin-right: 20px;
}
.head-sculpture .photo{
  width: 200px;
  height: 300px;
  border: 1px solid #ccc;
  //text-align: center;            //文本居中
  display: table-cell;
  vertical-align: middle;       //垂直居中
}
.head-sculpture .name{
  //text-align: center;     
}
.description{
  width: 350px;
  height: 290px;
  border: 1px solid #ccc;  
  float: left;
  padding: 10px 0 0 20px;     //上 右 下 左
}


<div class="info-show">
  <div class="head-sculpture">
    <div class="photo">头像</div>
    <div class="name">姓名</div>
  </div>
  <div class="description">描述</div>
</div>