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

正常文档流block、inline、inline-block元素与浮动框之间的位置关系

2017-10-09 20:39 525 查看

今天在群里面回答了一个问题：

起初以为是外层元素也浮动的缘故：

又思考了一下，突然想到正常文档流下的块状元素的文本内容会避开浮动元素所处的空间。

行内元素与文本内容是一个性质，也会避开。

input、button是行内块状元素。按照提问者的描述，应该就是这个原因。行内块状元素也会避开浮动元素所处的空间！！！

写了一段测试代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动流动布局测试</title>
<style type="text/css">
#container{
width: 600px; height: 300px;
border: 3px solid #0CB;
}
.float{
width: 150px; height: 202px;
background: #CCA;
float: left;
}
.static{
display: inline-block;
display: inline;
display: block;
width: 300px; height: 200px;
border: 1px solid #D3E;
}
</style>
</head>
<body>
<div id="container">
<div class = 'float'>float</div>
<div class = 'static'>inline-block/inline/block</div>
</div>
</body>
</html>

第1个子元素浮动，分别让第2个子元素为block、inline和inline-block，其表现印证了上述论断。

1. display: block

2. display: inline

3. display: inline-block

再来试试input的效果，代码稍作调整：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动流动布局测试</title>
<style type="text/css">
#container{
width: 600px; height: 300px;
border: 3px solid #0CB;
}
.float{
width: 150px; height: 202px;
background: #CCA;
float: left;
}
input{
width: 300px; height: 200px;
border: 1px solid #D3E;
}
</style>
</head>
<body>
<div id="container">
<div class = 'float'>float</div>
<input type = 'button' value = '搜索' />
</div>
</body>

可以看出，完全表现出inline-block元素所具备的布局方式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS 布局浮动 inline-block

相关文章推荐

新的分享

章节导航