您的位置：首页 > Web前端 > CSS

css浮动

2015-07-06 23:13 686 查看

一、浮动介绍

历史：

浮动属性产生之初是为了实现“文字环绕”的效果，让文字环绕图片在网页实现类似word中“图文混排”。

定位方式：

浮动让元素脱离正常流，向父容器的左边或右边移动直到碰到包含容器的边【经测试碰到padding即停】或者碰到其他浮动元素。文本和行内元素将环绕浮动元素。

Note:

1、碰到容器的边指的是容器的padding内边。

举例验证：

<style type="text/css">
.left {
float: left;
}
.right{
display: table-cell;
}
</style>
<body>
<div class="left">
<img src="img/wb.jpg"/>
</div>
<div class="right">
文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容
</div>
</body>


View Code



六、float布局和inline-block布局对比

浮动和inline-block都能让元素排成一排，那么应该如何抉择？下面对比一下。

文档流：浮动元素脱离正常流，让文字环绕。inline-block仍然在正常流中。

水平位置：不能通过给父元素设置text-align:center让浮动元素无法水平居中【因为脱离文档流】，而inline-block可以。

垂直对齐：浮动元素紧贴顶部，inline-block默认基线对齐，可通过vertical-align调整。

空白：浮动忽略空白元素彼此紧靠，inline-block保留空白。

举例：浮动布局可以去掉元素之间的空格，而inline-block会保留空格。

<style>
button {
margin: 0;
float: left;
}
p {
clear: both;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
</body>




分析：button默认display:inline-block；可见他们之间有空格的距离。加了float:left后各个button元素之间空格消失。

总结一下：处理文字环绕自然是用浮动，处理图片列表垂直对齐或者横向导航可以选择inline-block。

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：/article/5239304.html有问题欢迎与我讨论，共同进步。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航