At Baidu, some people said that the in-line elements would become block-level elements after they floated, so they continued to search on the Internet, and some people said that without display: block, the accounting element cannot be changed; okay, practice results, try it yourself, personal To summarize:
After the inline elements are set to float, they become more like inline-block (inline block-level elements, elements set to this attribute will have both inline and block-level characteristics, the most obvious difference is that its default width is not 100%), At this time, setting padding-top and padding-bottom or width and height for inline elements is effective
Take sapn as the realization object, experiment code:
<!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>
The same is true when floating block-level elements. The attribute is more like inline-block, except that the parent's text-align:center has no effect on accounting elements (ie high version will have an effect). Note that , The element that is set to float is out of the document flow, so it will cover the element that is not set to float. Take the most typical block-level element div as an example
Code:
<!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>
