浮动

  1. 属性
    float：left左浮动
    float：right右浮动

同级元素一个浮动，其他都要浮动，所有的标签都可添加浮动属性

  1. 特点：
  • 浮动元素会排成一排
  • 没有设置宽度的块元素添加浮动之后会自动伸缩为内容的宽度
  • 浮动元素会找紧挨着他的浮动元素贴边
  • 行内元素添加浮动属性之后可以设置宽高
  • 当一行的空间不够浮动元素存放的时候会另起一排
  • 右浮动会颠倒盒子顺序
  • 浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容
  1. 清除浮动
    原因：给子元素添加浮动属性之后，子元素会脱离文档流，使其父元素造成高度塌陷
    解决办法：
  • 定高法：给父元素添加一个高度
  • 给父元素添加一个overflow：hidden
  • 额外标签法（一般不用）：给浮动元素的父元素后面添加一个空标签，为其添加属性：clear：both（只添加给块元素）
  • 伪元素添加法：（最好的一种方法，经常使用）
    添加的伪元素是一个行内元素
  1. .clearfix:after{
  2.     /* 伪元素必须的属性 */
  3.     content:".";
  4.     display:block;/*变成块元素*/
  5.     clear:both;/*清除元素两端的浮动*/
  6.     height：0;
  7.     visibility：hidden;/*元素在页面占位不可见*/
  8. }

visibility:hidden和display：none的区别

相同点：都是让元素不可见
不同点:visibility:hidden让元素占位不可见；display：none是让元素不占位消失

元素不可见

  1. visibility:hidden
  2. display：none
  3. height:0
  4. 透明度为0