浮动总结

Mr Gong

于 2017-02-08 20:52:03 发布

阅读量437

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/54933126

HTML 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动总结</title>
    <style type="text/css">
    .box1{width:100px;height:100px;background: red;float: left;}
    .box2{width: 300px;height: 300px;background: blue; 
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>


----------

display:inline-block;
1.使内嵌支持宽高
2.使块级在一行显示
3.换行被解析
4.不设置宽度时，宽度由内容撑开
5.在IE6，IE7下不支持快属性标签的inline-block

float：left/right/none
1.使内嵌支持宽高
2.使块级在一行显示
3.换行不被解析
4.不设置宽度时，宽度由内容撑开
5.元素加了浮动，会脱离文档流，向指定方向移动，直到碰到父级否者另一个浮动元素停止
6.提升层级半级，其他元素占据该元素位置时，其内容会被挤出去
（文档流是文档中可显示的对象在排列时所占的位置）

----------