浮动

什么是浮动

浮动就是可以元素向左或者向右移动,设置这个样式之后可以让块级元素在一行内显示,直到碰到父级元素的内边距或是上一个元素的外边距.(与父级或者上一个元素有没有设置浮动属性无关)。


浮动的语法

  • float:left 让元素向左移动
  • float:right 让元素向右移动
  • float:none元素不移动
  • float:inherite 让元素从父元素继承浮动

浮动的特性

  • 脱离文档流
  • 内容撑开宽高
    -多个元素设置浮动,会排在一排`
  • 提升层级半级
  • 一个元素设置了浮动属性后,下一个元素就会无视这个元素的存在,但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围。
  • 不管是什么属性的元素,如果设置了浮动属性,该元素就变成了具有inline-block属性的元素

浮动的细节

  • 浮动元素不会在其浮动方向上溢出父级的包含块
    元素左浮动,左外边距不会超过父级的左内边距,元素右浮动,其右外边距不会超过父级的右内边距。
  • 浮动元素的位置受到同级同向浮动元素的影响
    同一父级中有多个浮动元素,后一个元素的位置会受到前一个浮动元素位置的影响,他们不会相互遮挡,后一个浮动元素会紧挨着前一个浮动元素的左外边距进行定位,如果当前空间不足,则会换行,否则会放置在前一个浮动元素的下面

浮动的表现

  • 没有设置浮动属性的元素会填充浮动留下来的空间
  • 如果浮动元素和非浮动元素发生重叠式,浮动元素会在最上边
  • 使用浮动时,该元素会脱离文档流,后面的元素会无视这个元素,但依然会为这个浮动元素让出位置,并且元素中的文字内容会环绕在其周围
  • 设置浮动时,若子级的元素加起来的宽高比父元素更大(是指父元素盒子的content部分,那么会自动换行)

你可能感兴趣的:(html/css)