关于float 一些思考

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  *{margin:0;
      padding:0;
  }

     .red{
       width:510px;
       height:100px;
       background:red
   }
 img{float:left;}
  
  </style>
</head>
<body>
  
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" />
      <div class="red">sagasgasgagasgahfdgddsfagasg</div>
      
     
      

</body>
</html>

这个情况！我理解是浮动元素会被块级元素忽略的元素（就像图中的div 不知道左边有个float元素，依然会铺满整个宽度，div里面的内容为啥跑到下面来了），就是老师说脱离正常文档流，漂浮在标准流智商。但是行内元素知道浮动元素的边界在哪里，会给它让位置。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  *{margin:0;
      padding:0;
  }

     .red{
       width:510px;
       height:100px;
       background:red;
       float:left;
   }

  
  </style>
</head>
<body>
  
<img src="http://img1.sycdn.imooc.com/climg//58c0f808000129a303600215.jpg" />
      <div class="red">sagasgasgagasgahfdgddsfagasg</div>
      
     
      

</body>
</html>

破晓小哥哥 2018-05-02

源自：float浮动 3-3 编程练习

收起

5回答

小于飞飞 2018-05-27 13:47:19

div 块元素，独占一行，span 行元素。注意虽然 span设置了 padding值，但是上下不起作用。可以看到文字在黑色下方。
调整 span 的padding ，还是在黑色下方

3. 同时多加几个，上下不起作用，重叠。

这因为，span上下，padding和margin 不起作用。希望解答你的疑惑，动手实践，加油！

收起回答

提问者破晓小哥哥 2018-05-26 11:50:10

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="margin: 0;padding: 0">


    <div style="width:70%; height:200px; background-color:black;color: white">
        513516313213131asfasfasfasfasgsagasgasfdasdasfassafasddkjashusahfksafsgfsfjg
    </div>
    <span style="background-color:red; width:50% ;padding: 200px">
       asgasgasasgasga
    </span>

</body>
</html>

请老师再分析下这个。。谢谢老师！！！！

收起回答

提问者破晓小哥哥 #1

span这个padding 也会覆盖div 中文字加背景

2018-05-26 11:52:19

好帮手慕星星 2018-05-02 17:41:07

1、在没有设置浮动，没有给三个span设置padding值的情况下，显示如下：

因为span标签为内联元素（inline），不能设置宽高，所以设置的100px和300px并没有生效。

2、给span添加上padding值30px之后，显示如下：

3、给左边添加左浮动，显示如下：

浮动之后就自动变成了块状元素（block），可以设置宽高了，看起来就比没有浮动的大了一点点，浮动到了元素的最左边。右边两个没有浮动的就在右边剩余的地方居中显示。

3、给右边设置了右浮动之后，显示如下：

右边设置右浮动之后变成块状元素，宽度也就生效了，但是因为右边的元素太宽了剩余的位置不够中间无浮动占据，也就是这个位置：

所以会把右浮动的给挤下来，只要文字有地方就可以了，padding的空间时不用的。，你可以把右侧的宽度缩小一点，比如100px，就会显示如下：

这样就好理解了。

收起回答

提问者破晓小哥哥 #1

行内元素设置 padding 四个方向都可以。 margin只有左右对吗？右边设置右浮动之后变成块状元素，宽度也就生效了，但是因为右边的元素太宽了剩余的位置不够中间无浮动占据，也就是这个位置：，就是这里为什么无浮动的span 会覆盖右浮动的span

2018-05-08 21:52:57
好帮手慕星星回复提问者破晓小哥哥 #2

行内元素设置 padding 四个方向都可以。margin只有左右值生效是对的。无浮动的span 会覆盖右浮动的span 是因为span是一个行内元素，只有中间的文字占据空间，padding值是不占据空间的，所以会覆盖，你可以给中间的无浮动span设置成行内块状元素（inline-block），这样就不会覆盖了，自己测试下。

2018-05-09 09:42:25
提问者破晓小哥哥回复好帮手慕星星 #3

我觉得加了float 浮动之后更像 inline-block行内块状元素

2018-05-13 15:36:48

点开查看后面2条评论

提问者破晓小哥哥 2018-05-02 17:01:54

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width:600px; height:600px; background-color: #d03642;margin:50px auto;text-align: center">
    <!--左浮动-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen;float: left">左浮动</span>
    <!--未设置浮动（父级设置了text-align:center）-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color:green">无浮动</span>
    <!--右浮动-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 300px; background-color: lightseagreen;float: right;">右浮动</span>
</div>
</body>
</html>

跪求老师分析下这个效果！！！！！！！

收起回答