CSS-float 特性及应用总结

来源：互联网发布：淘宝一元拍卖不付款编辑：程序博客网时间：2024/05/20 11:48

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>

0 0