行内元素和块级元素使用浮动后的变化

时间：2024-04-17 08:52:40

百度的时候有人说行内元素浮动之后会变成块级元素，于是继续在网上搜索，又有人说不加display：block就变不了会计元素；好的吧，实践出结果，自己试试吧，个人总结了一下：

行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的

以sapn为实现对象，实验代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <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: lightseagreen">无浮动</span>
    <!--右浮动-->
    <span style="color:#fff;font-size: 30px; height:50px;padding:30px;width: 100px; background-color: lightseagreen;float: right;">右浮动</span>
</div>
</body>
</html>

效果图：

 

给块级元素设浮动的时候也是同样的情况，属性更加像是inline-block，只是父级的text-align:center是对会计元素没有效果（ie高版本的会有效果），需要注意的是，设置浮动的元素是脱离文档流的，因此会遮盖未设置浮动的元素，以最典型的块级元素div为例

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="width:600px; height:600px; background-color: #d03642;margin:50px auto;text-align: center">
    <!--左浮动-->
    <div style="color:#fff;font-size: 30px; height:50px;padding:30px; background-color: lightseagreen;float: left">左浮动</div>
    <!--未设置浮动-->
    <div style="color:#fff;font-size: 30px; height:100px;padding:30px;width: 150px; background-color: blanchedalmond;border:1px solid green">无浮动</div>
</div>
</body>
</html>

效果图

 

相关文章