CSS笔记 - 浮动、高度塌陷和高度塌陷的解决办法

浮动

目录

• 浮动
  • 1. 浮动简介
  • 2. 高度塌陷和BFC

1. 浮动简介

• 使用float属性来设置元素的浮动，通过浮动可以使一个元素向其父元素的左侧或右侧移动
• 语法：
  • none：默认值，元素不浮动
  • left：元素向左浮动
  • right：元素向右浮动
• 浮动的特点：
  • 浮动元素会完全脱离文档流，不再占据文档流中的位置
    • 块元素不再独占页面的一行
    • 块元素的宽度和高度默认都被内容撑开
    • 行内元素会变成块元素
  • 设置浮动以后元素会向父元素的左侧或右侧移动，且默认不会从父元素中移出
  • 元素设置浮动以后，水平布局的等式便不需要强制成立
  • 浮动元素在移动时，不会超过它之前的，其它浮动元素的位置和高度
  • 浮动元素不会盖住文字，可以利用浮动设置文字环绕图片的效果

2. 高度塌陷和BFC

• 高度塌陷：在一般布局中，父元素的高度默认是被子元素撑开的。当子元素浮动后，其会脱离文档流，无法撑起父元素的高度，造成父元素的高度丢失，进而导致页面布局混乱。这样的问题称之为高度塌陷

• BFC（块级格式化环境）：BFC是CSS中的一个隐藏属性，开启BFC后该元素会变成一个独立的布局区域。

  开启BFC后的特点：

  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的元素，子元素和都元素外边距不会重叠
  • 开启BFC的元素可以包含浮动的子元素

• clear属性：可以通过设置clear属性清除浮动元素对当前元素的影响

  语法：

  • left：清除左侧浮动元素对当前元素的影响
  • right：清除右侧浮动元素对当前元素的影响
  • both：清除两侧浮动元素中对当前元素的影响最大的那侧

  原理：设置清除浮动后，游览器会自动为元素添加一个上边距，以使其位置不受其它元素的影响

• 利用clear解决高度坍塌的方法

  .clearfix::before,
  .clearfix::after{
  	content:'';
  	display: table;
  	clear:both;
  }
  

  原理：
  将父元素的class设置为clearfix，使用伪类在前端和末端分别插入一个没有实际文本显示的空字符。
  插入在前端的文本可以解决外边距重叠问题，因为隔开了父元素和子元素的外边距。
  插入在后端的文本解决了高度塌陷的问题，由于clear的原因会在父元素末尾插入一个，高度包括浮动元素在内的空字符，这样父元素就会被撑开。
  最后display为table是因为table在空的情况下不占体积。