【27】CSS核心样式（6）——浮动属性（上）

倏存

已于 2022-07-12 21:42:20 修改

阅读量2.8k

点赞数 7

分类专栏：前端基础文章标签： css 原力计划

于 2021-04-05 22:01:20 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115408464

版权

浮动是我们学习的第一种脱离标准流的方式。
本篇• 浮动定义 • 浮动的性质
在这里插入图片描述
下篇• 浮动的问题 • 清除浮动方法

一、浮动定义

1.定义

浮动	一种非常重要的布局属性
属性名	float，漂流、浮动的意思
属性值	①left 左浮动 ②right 右浮动
作用	让元素脱离标准流，同一级的浮动的元素可以并排在一排显示

2.举例

2.1 举例——右浮动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动定义举例（右浮动）</title>
  <style>
    * {
     
      margin: 0;
      padding: 0;
    }
    .box {
     
      width: 800px;
      height: 100px;
      border: 1px solid #f00;
    }
    .box p {
     
      float: right; /*在父元素中右浮动*/
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</body>
</html>

在这里插入图片描述

2.1 举例——左浮动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动定义举例（左浮动）</title>
  <style>
    * {
     
      margin: 0;
      padding: 0;
    }
    .box {
     
      width: 800px;
      height: 100px;
      border: 1px solid #f00;
    }
    .box p {
     
      float: left; /*在父元素中左浮动*/
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</body>
</html>

在这里插入图片描述

二、浮动的性质

为了更好的利用浮动进行布局，我们需要了解浮动相关的性质。

1.脱离标准流

标准文档流特点：区分行块。
块级元素：可以设置宽高，必须独占一行；
行内元素：不能设置宽高，可以并排一行。

浮动的元素脱离了标准流的限制，具备行块二象性：
浮动的元素可以设置宽高，还可以并排一行（如上举例），而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。

2.依次贴边

浮动属性值：left、right。
浮动方向设置不同，进行布局时，加载位置方向不同。

2.1 以 left 为例：

(1) 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边←子元素1←子元素2← 子元素3←子元素4。
（如浮动的定义中左浮动的举例）

(2)父元素宽度如果不够:
(2.1)例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
（如下举例）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

最低0.47元/天解锁文章

倏存

关注

7
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
13
评论
【27】CSS核心样式（6）——浮动属性（上）

• 浮动定义 • 浮动的性质
复制链接

扫一扫

专栏目录