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

最新推荐文章于 2023-09-05 15:04:41 发布

Alcantara6

最新推荐文章于 2023-09-05 15:04:41 发布

阅读量1.2k

点赞数

分类专栏： CSS文章前端文章文章标签： CSS 布局浮动 inline-block

本文链接：https://blog.csdn.net/alcantara/article/details/78186504

版权

前端文章同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

CSS文章

5 篇文章 0 订阅

订阅专栏

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

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

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

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

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元素所具备的布局方式

Alcantara6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正常文档流block、inline、inline-block元素与浮动框之间的位置关系

今天在群里面回答了一个问题：起初以为是外层元素也浮动的缘故：又思考了一下，突然想到正常文档流下的块状元素的文本内容会避开浮动元素所处的空间。行内元素与文本内容是一个性质，也会避开。input、button是行内块状元素。按照提问者的描述，应该就是这个原因。行内块状元素也会避开浮动元素所处的空间！！！
复制链接

扫一扫