浮动float

最新推荐文章于 2021-08-16 20:40:56 发布

小白白中之白

最新推荐文章于 2021-08-16 20:40:56 发布

阅读量136

点赞数

分类专栏：网页笔记

本文链接：https://blog.csdn.net/m0_53438035/article/details/119009136

版权

网页笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一: 对块级元素设置float

所有行内元素承认浮动块级元素的宽度和高度¹，相邻行内元素仍与浮动元素元素一行²，同时行内元素会因为浮动属性而与浮动方向的元素换位置一般为行内元素，一般位置为容器的边界或另外一个浮动元素（若容器宽度不够则换行）。
与之相邻且与浮动方向相同的块级元素分行³，浮动的块级元素脱离文档流
因为脱离了文档流，与浮动方向相反的其他块级元素会占领原块级元素的位置⁴

测试代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      #a {
        width: 100px;
        height: 100px;
        float: left;
      }
      #b {
        width: 500px;
        height: 500px;
        background-color: aqua;
      }
      #c {
        width: 50px;
        height: 50px;
        background-color: gray;
      }
      #d {
        width: 100px;
        height: 21px;
        float: left;
      }
    </style>
  </head>
  <body>
    <span>123</span>
    <div id="b">
      <div id="c">a</div>
      <span>left</span>
      <div id="c">b</div>
      <!-- <span>left</span> -->
      <div id="a">浮动1</div>
      <div id="d">浮动2</div>
      <span>right</span>
      <div id="c">c</div>
      <span>right</span>
      <div id="c">d</div>
    </div>
  </body>
</html>

效果：
在这里插入图片描述

二：对行内元素设置float

全部同上

参考的文章：
1.块级元素与内联元素（行内元素）及浮动知识总结
 2.为什么div浮动后没有把行内元素覆盖住
 3.MDN-float
4.html css float left与 float right的使用说明

我们可以看到与浮动相邻和不相邻的行内元素（两个right）承认其宽度，最上面的right承认了两个浮动的宽度，但由于浮动2高度不够，所以下面的right只有浮动1的距离。 ↩︎
我觉得这种现象还是用文字环绕来解释比较好（因为right与浮动都处于同一行） ↩︎
浮动1与b分行 ↩︎
可以看出块级元素占据了浮动1的位置但为什么留出了一行文字的高度呢？那是因为行内元素right还占据了空间 ↩︎

小白白中之白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
浮动float

一: 对块级元素设置float所有行内元素承认浮动块级元素的宽度，相邻行内元素仍与浮动元素元素一行，同时行内元素会因为浮动属性而与浮动方向的元素换位置，一般位置为容器的边界或另外一个浮动元素。与之相邻且与浮动方向相同的块级元素分行，浮动的块级元素脱离文档流因为脱离了文档流，与浮动方向相反的其他块级元素会占领原块级元素的位置二：对行内元素设置floatList item...
复制链接

扫一扫