css的浮动与清理 父级塌陷

浮动

float

属性有float：left right 

---

 

clear 

清理浮动

 

 

clear：both 

作用对象两侧不允许有浮动元素，如果有元素，对象就会自己换行；

 

clear：left

作用对象左侧不允许有浮动元素，如果有元素，对象就会自己换行；

 

clear：right

作用对象右侧不允许有浮动元素，如果有元素，对象就会自己换行；

 

---

 

 

当父级元素没有高度的时候，子级元素都是浮动元素，会造成父级元素塌陷。

解决方法4种

 

1.增加父级元素的高度

#father{

    height：300；

}

（简单 但是如果子元素的高度改变，会受到限制）

 

2.该代码后面增加空div，清理浮动

<div class="clear"></div>

.clear{
    clear：both;
    }

(简单 但是在代码中加入空代码不好）

 

3.overflow，隐藏浮动

overflow的属性有 scroll滚动条和hidden隐藏 还有其他

#father{
  overflow：hidden ；
}

（如果元素存在position，会收到影响）

 

4.父级伪类，空内容 空块 清理浮动

#father：：after{
  content:"";
  display:block;  
  clear:both;  
}

(复杂 推荐使用)

 

 

 

 

---

 

 

文本溢出的方法

 

1.单行文本（省略号）

不换行

隐藏溢出部分

溢出部分省略号代替

#p{
  white-space：nowrap;
  overflow:hidden;
  text-overflow:ellipsis;    

}

 

 

2.多行文本（截断）

计算容器高度和文本的单行高度，计算容器可以容纳多少行

溢出部分隐藏

div{
  line-height: 20 px ;
  overflow:hidden;
}

(假设容器高度为60px，单行20px，有3行)

 

 

 

---

 

 

图片和文字的替换

 

1.把文字移出容器

不换行

隐藏溢出部分

p{
    text-indent：200px；
    white-space：nowrap；
    overflow：hidden；
　　background-img：url（hone.jpg）

}

 

 

 

2.padding-top 高度为0

div{
    width:200px;
    height:0;
    padding-top:40px;
    overflow:hidden;
　　

    background-img：url（hone.jpg）

}

（图片高度为40px，）

---

 

 

背景图片

background-img

图片路径

background-position

图片的位置，(left top)(center center)

background-size

图片大小（宽 高）（200px 40px）

background-repeat:no-repeat

图片的平铺 （不平铺）