问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

float的问题

头像
旷野
    5111226

    代码：
    clipboard.png

    效果：
    clipboard.png

    问题：
    内容3的div发生左浮动，内容3的div和内容4的div的位置现在是一样的，但是为什么内容4的div里面的字“内容4”还在下面，不往上走？

    htmlcss
    阅读 2.4k
    4 个回答
    得票最新
    头像
    eraser123
      483128
      ✓ 已被采纳

      正如楼主所说：

      内容3的div和内容4的div的位置现在是一样的

      div浮动也是要占位置的，这两个div的宽高还一样，所以内容3的div把内容4div的内容给挤下来了，如果把浮动元素float内容3的div宽度改小点，比如50px，内容4就可以上去了。如：

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{padding:0;margin: 0;}
      .box{border: 2px solid blue;}
      div div{border: 2px solid red;width: 100px;height: 100px;}
      .float{float:left;width:50px;}
    </style>
  </head>
  <body>
    <div class="box">
      <div>内容1</div>
      <div>内容2</div>
      <div class="float">内容3</div>
      <div>内容4</div>
    </div>
  </body>

      图片描述

      头像
      命理难说
        3.6k3912

        这就是float的字围效果啊朋友。。。没记错的话。。

        头像
        青海
          81

          你把内容3这几个字去掉的话会发现是什么问题了

          头像
          bingo彬哥
            2.5k52752

            这里面有文档流和文本流两个概念。
            文档流是相对于盒子模型讲的，文本流是相对于文字段落讲的。
            元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
            但是绝对定位(position:absolute;)后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

            <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{padding:0;margin: 0;}
      .box{border: 2px solid blue;}
      div div{border: 2px solid red;width: 100px;height: 100px;}
      .float{float:left;position: absolute;}
    </style>
  </head>
  <body>
    <div class="box">
      <div>内容1</div>
      <div>内容2</div>
      <div class="float">内容3</div>
      <div>内容4</div>
    </div>
  </body>

            clipboard.png

            文字环绕效果，文字不包含在div块标签中，包含在p行标签中，因此会产生折行包围的样式。

            <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{padding:0;margin: 0;}
      .box{border: 2px solid blue;width:300px;}
      div div{border: 2px solid red;width: 50px;height: 50px;}
      .float{float:left;}
    </style>
  </head>
  <body>
    <div class="box">
      <div>内容1</div>
      <div class="float">内容2</div>
      <p>内容3内容3内容3内容3内容3内容3内容3
        内容3内容3内容3内容3内容3内容3内容3
        内容3内容3内容3内容3内容3内容3内容3
        内容3内容3内容3内容3内容3内容3内容3
        内容3内容3内容3内容3内容3内容3内容3</p>
    </div>
  </body>
</html>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题