CSS flat 浮动笔记

最新推荐文章于 2022-11-21 23:03:04 发布

SKYE 徐

最新推荐文章于 2022-11-21 23:03:04 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/weixin_45165231/article/details/118187913

版权

这篇博客介绍了CSS中的浮动属性`float`，通过设置`float:left`或`float:right`，元素会脱离正常文档流，向左或向右浮动，允许文本和其他元素环绕。示例展示了如何使用`float`进行图文布局，以及在多栏布局中的应用，如`left`和`right`的浮动效果。

摘要由CSDN通过智能技术生成

float 属性来设置元素的浮动定位。

浮动元素不在文档流中，它向左或向右浮动，

直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

通常需要用 width 属性来指定浮动元素占据的水平空间。

例如, 如果图像是右浮动，下面的文本流将环绕在它左边

<style>
  img {
    float: right;
  }
</style>
<body>
  <p>
    在下面的段落中，我们添加了一个
    <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。
  </p>
  <p>
    <img
      src="https://atts.w3cschool.cn/attachments/image/20201019/1603097333917107.png"
      width="95"
      height="84"
    />
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
    这是一些文本。这是一些文本。这是一些文本。
  </p>
</body>

<head>
  <style>
  #left {
    float: left;
    width: 50%;
  }
  #right {
    float: right;
    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <header>
    <h1>欢迎！</h1>
  </header>
  <section id="left">
    <h2>CSS编程实战</h2>
    <p>CSS 指层叠样式表 (Cascading Style Sheets)</p>
  </section>
  <aside id="right">
    <h2>侧边栏</h2>
    <p>CSS 教程</p>
    <p>CSS 简介</p>
    <p>CSS 语法</p>
    <p>CSS Id 和 Class选择器</p>
    <p>CSS 创建</p>
    <p>CSS Backgrounds(背景)</p>
    <p>CSS Text(文本)</p>
  </aside>
</body>