CSS-float 特性及应用总结

1.      float的结果

包裹、坚挺、隔绝、破坏

2.      清除浮动带来的影响

方法:浮动元素底部加 clear:both 的空div(margin重叠)

            父元素BFC化(无margin重叠)

            .clearfix:after{

                  content:“”;

                  display:block;

                  height:0;

                  overflow:hidden;

                  clear:both;

}

.clearfix{

         *zoom:1;

}

.clearfix:after{

         content:“”;

         display:table;

         clear:both;

}

.clearfix{

         *zoom:1;

}

3.      浮动的滥用

浮动后:block化及去空格,使得浮动适合砌砖头。但是这样布局容易造成页面块滑动,而且每个块大小必须固定。

4.      用浮动实现流体布局

4.1   单侧固定,另一侧自适应布局(左浮动)

左侧(固定):width,float:left/float:right

右侧(自适应):padding-left/margin-left/padding-right/margin-right

4.2   单侧固定,另一侧自适应布局(右浮动)

左侧(自适应):把需浮动元素外包裹一层div:width:100%; float:left;

                               需浮动元素:margin-right:左与右需空出的大小+右侧固定元素大小;

右侧(固定大小): width:右侧固定元素大小; float:left; margin-left:-右侧固定元素大小;

4.3   两侧自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test 流体布局</title>
	<style>
	 .rightphoto{
      float:left;
      margin-right: 20px;
      width:100px;
   }
   .leftdiv{
      display: table-cell;
      *display: inline-block;
      width:2000px;
      *width:auto;
   }
   .leftphoto{
      line-height: 22px; 
      padding-bottom: 6px; 
      font-size: 14px;
   }
	</style>
</head>
<body>
  <!-- 左右和实际情况是反的,,,是我愚钝了 -->
  <a href="#" class="rightphoto"><img src="P_00.jpg" alt="hello"/></a>
  <div class="leftdiv">
    <p class="leftp">12月25日为本月最后一个周五,按照惯例,图书馆将进行内部学习。12月25日(周五)下午闭馆,晚上5点照常开放,望广大师生读者周知。</p>
    <img src="P_01.jpg" class="leftphoto" alt="hi"/>
  </div>
</body>
</html>

你可能感兴趣的:(CSS-float 特性及应用总结)