前端学习笔记：浮动知识点

浮动概念：可以让多个块级元素一行内排列

一、浮动特性

• 浮动元素会脱离标准流
• 浮动的元素会一行内显示并且元素顶部对齐， 浮动的元素是互相贴靠在一起的，不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐
• 浮动的元素会具有行内块元素的特性，且任何元素都可以添加浮动
  (如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定)
• 浮动的盒子不再保留原先的位置，即浮动元素不占位置，“它浮起来了”

二、使用浮动布局注意事项

• 浮动和标准流的父盒子搭配
  先用标准的父元素排列上下位置，之后内部元素采用浮动排列左右位置
• 一个元素浮动了，理论上其余的兄弟元素也要浮动
  浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

三、清除浮动方法

• 1、额外标签法也称为隔墙法，是W3C推荐的做法，额外标签法会在浮动元素末尾添加一个空的标签，或者其他标签，注意：要求这个新的空标签必须是块级元素

clear的属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

常用 clear: both