CSS-浮动

最新推荐文章于 2024-06-18 20:30:59 发布

JINGJID

最新推荐文章于 2024-06-18 20:30:59 发布

阅读量1.7k

点赞数

分类专栏： css学习文章标签： css

本文链接：https://blog.csdn.net/JINGJID/article/details/124052540

版权

本文详细介绍了CSS中的浮动属性float，包括left和right方向的浮动，以及clear属性的使用。同时，针对父级边框塌陷的问题，提出了四种解决方案：增加父级元素高度、空div清除浮动、overflow方法以及使用伪类:after。最后，对比了display和float的区别，指出float会使元素脱离标准文档流，可能导致父级边框塌陷的问题。

摘要由CSDN通过智能技术生成

1.display

display的用法：
block:块元素
inline-size: 行内元素
inline-block：是块元素，但可以内联，在一行
none：消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            /*display的用法*/
            /*block:块元素*/
            /*inline-size: 行内元素*/
            /*inline-block：是块元素，但可以内联，在一行*/
            /*none：消失*/
            width: 100px;
            height: 100px;
            border: 3px  solid rebeccapurple;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 3px solid rebeccapurple;
            display: inline-block;
        }
    </style>
    <title>diaplay</title>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html><