CSS浮动

2021-06-01 12:04

阅读：831

YPE html>

标签：设置 char one lang spl 对比 flow clear content

5 浮动

标准文档流

块级元素：独占一行

h1~h6  p  div   列表。。。

行内元素：不独占一行

span  a   img  strong

行内元素可以被包含在块级元素中，反之，则不可以~

5.2 display 却可以这样做



display

div块元素
span行内元素

5.3 float

1.左右浮动

5.4，父级边框塌陷的问题

clear

clear: right 右侧不允许有浮动元素
clear: left:  左侧不允许有浮动元素
clear: both  两侧不允许有浮动元素
clear: none 没有浮动

解决方案：

1.增加父级元素的高度

2.增加一个空的div标签清除浮动


 .clear{
                clear: both;
                margin: 0;
                padding: 0;
            }

3,overflow

在父级元素中增加一个 overflow:hidden;




overflow



    
        指一个人发出的笑声，高兴开心欢乐时的状态，抒发快乐的心情，表现一个人很开心快乐的状态。

4.父类添加一个伪类：：after

  #content:after{
            content: "";
            display: block;
            clear: both;
        }

小结：

5.5 对比

CSS浮动

标签：设置 char one lang spl 对比 flow clear content

原文地址：https://www.cnblogs.com/202116xi/p/14527471.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS浮动
文章链接：http://soscw.com/index.php/essay/89910.html

亲，登录后才可以留言！