zoukankan      html  css  js  c++  java
  • 浮动 --- 文字环绕

     
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
        img{
            width: 100px;
            float: left;
        }
        </style>
    </head>
    <body>
        <img src="./a.jpg" alt="" />
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada famePellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </body>
    </html>

    效果如图:

    然后百思不得其解,因为img本身为行内块元素,兼有块状元素与行内元素的“气质”,但紧跟在其后面的p元素是块状元素,当img浮动之后会脱离标准文档流,那么p元素会上移,按照经验文字部分会有一部分和img重叠(想象float后的元素都是漂浮在文档流之上的),然而并没有重叠。
     
    文字可以环绕图片的原因如下:
    脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

    原文:https://www.cnblogs.com/zm-2010/p/5656063.html

  • 相关阅读:
    两款命令行下的翻译工具: sdcv & translateshell
    谷歌语言标准中,C++成绝对的佼佼者 狼人:
    12个优秀的云计算操作系统 狼人:
    幻灯片在网页设计中应用的21个优秀案例 狼人:
    对Web开发人员有用的8个网站 狼人:
    网页设计师应向肖像画家吸取的11个理念 狼人:
    揭秘Facebook的系统架构 狼人:
    Chrome或取代Firefox成Ubuntu默认浏览器 狼人:
    Gnome 3.2 发布计划及新功能 狼人:
    MyFaces Core v2.0.7/2.1.1 发布,JSF框架 狼人:
  • 原文地址:https://www.cnblogs.com/xjy20170907/p/11579848.html
Copyright © 2011-2022 走看看