码迷,mamicode.com
首页 > 其他好文 > 详细

【学习】脱离文档流分析

时间:2019-10-29 21:20:04      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:部分   float   world   存在   break   blog   class   ack   总结   

【学习原文自】https://www.cnblogs.com/shenfangfang/p/5278528.html

 

学习总结:

1.脱离文档流-部分无视:浮动的元素可以向左向右移动,直到他的外边缘碰到包含框或者另一个浮动框的边框为止。

  • 浮动元素后跟block元素:

    浮动的框之后的block元素会认为这个框不存在,但是其中的文本依然会为这个元素让出位置。

    1.没有中文的很短的文本

      技术图片

    2.没有中文的很长的文本

      技术图片

    3.包含中文的很短的文本

      技术图片

    4.包含中文的很长的文本

      技术图片

    5.没有中文的很长的文本-文本设置了world-break:break-all   

      技术图片

  • 浮动元素后跟inline元素:

    浮动的框之后的inline元素,会为这个框空出位置,然后按顺序排列。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     #box1 {
         background-color:pink;
         width:100px;
         height:100px;
     }
     #box2 {background-color:green;
         width:100px;
         height:100px;
         float:left;
     }
     #box3 {background-color:red;
         width:200px;
         height:200px;
         word-wrap: break-word;
     }
    </style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2 向左浮动</div>
<span id="box3">span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3span3</span>
</body>

技术图片

 

 

 

2.清除浮动

 

【学习】脱离文档流分析

标签:部分   float   world   存在   break   blog   class   ack   总结   

原文地址:https://www.cnblogs.com/buerjiongjiong/p/11761550.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!