关于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>44
收起
正在回答 回答被采纳积分+1
5回答
破晓小哥哥
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>
请老师再分析下这个。。谢谢老师！！！！
好帮手慕星星
2018-05-02 17:41:07
1、在没有设置浮动，没有给三个span设置padding值的情况下，显示如下：
因为span标签为内联元素（inline），不能设置宽高，所以设置的100px和300px并没有生效。
2、给span添加上padding值30px之后，显示如下：
3、给左边添加左浮动，显示如下：
浮动之后就自动变成了块状元素（block），可以设置宽高了，看起来就比没有浮动的大了一点点，浮动到了元素的最左边。右边两个没有浮动的就在右边剩余的地方居中显示。
3、给右边设置了右浮动之后，显示如下：
右边设置右浮动之后变成块状元素，宽度也就生效了，但是因为右边的元素太宽了剩余的位置不够中间无浮动占据，也就是这个位置：
所以会把右浮动的给挤下来，只要文字有地方就可以了，padding的空间时不用的。，你可以把右侧的宽度缩小一点，比如100px，就会显示如下：
这样就好理解了。
破晓小哥哥
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>
跪求 老师 分析下 这个效果！！！！！！！
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星