升级打怪-精读css权威指南(第十章)

最新推荐文章于 2021-08-03 21:26:00 发布

ken_ding

最新推荐文章于 2021-08-03 21:26:00 发布

阅读量95

点赞数

分类专栏： css 前端文章标签： css css权威指南

本文链接：https://blog.csdn.net/ken_ding/article/details/110739394

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

10 浮动及其形状

10.1 浮动

属性值	取值	初始值	适用于	计算值	继承性	动画性
float	left \| right \| none	none	所有元素	指定的值	否	否

10.1.1 浮动的元素

浮动元素脱离了常规的文档流
元素浮动后,对行内元素有影响,对块级元素无影响
浮动元素周围的外边距不折叠
如果浮动是非置换元素,要为元素设定宽度.否则,根据CSS规范,元素的宽度趋近与零.(经过自己验证,未出现这种现象)
浮动后的元素都是块级框

10.1.2 浮动规则

1.浮动元素的左(或右)外边界不能超过容纳块的左(或右)内边界.
2.前面的元素向左浮动,那后面的浮动元素的左外边界必定在前一个元素右外边界的右侧,除非后一个元素的顶边在前一个元素的底边以下.
3.左浮动元素的右外边界不能在右浮动元素的左外边界的右侧.右浮动元素的左外边界不能再左浮动元素的右外边界的左侧.
4.浮动元素的顶边不能比父元素的内顶边高.
5.浮动元素的顶边不能比前方任何一个浮动元素或块级元素的顶边高.
6.浮动元素的顶边不能高于之前浮动元素所在的行框的顶边
7.左浮动元素的左边如果还有一个向左浮动的元素,那么他的右外边界不能在容纳块右边界的右侧.
8.浮动元素必须放在尽可能高的位置上.
9.左浮动元素必须尽量向左移动,右浮动元素必须尽量向右移动.

10.1.3 具体行为

浮动元素比父元素高,会导致浮动元素从父元素的底部冒出来了
负外边距将导致浮动元素移到父元素的外面
浮动元素比父元素宽时,浮动元素会超出父元素的左右内边界.

10.1.4 浮动元素与内容重叠

行内框与浮动元素重叠时,其边框,背景和内容都在浮动元素"之上"渲染
块级框与浮动元素重叠时,其边框和背景在浮动背景"背后"渲染,而内容在浮动元素"之上"渲染

代码示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      p {
        margin: 0;
        padding: 0;
      }
      .foo {
        background-color: cadetblue;
      }
      i {
        background-color: crimson;
      }
    </style>
  </head>
  <body>
    <div class="foo">
      <img
        src="./logo.png"
        width="50"
        height="50"
        style="float: left; margin: 10px -15px 10px 10px"
      />
      <p>
        <i>谁我是谁我是谁我是</i
        >谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁我是谁
      </p>
      <div style="height: 50px; background-color: cyan">aaaaaa</div>
    </div>
  </body>
</html>