标准文档流等级森严 , 标签分为两种等级:

　　1 行内元素

　　2 快内元素

行内元素和快内元素的区别: (重要)

行内元素 :

　　与其他行内元素并排 ;

　　不能设置宽 , 高默认的宽度 , 就是文字的宽度 .

块级元素:

　　霸占一行 , 不能与其他任何元素并列;

　　能接受宽 , 高如果不设置宽度, 那么宽度将默认变为父亲的100% .

块级元素和行内元素的分类 :

在以前的HTML 知识中 , 我们已经将标签分过来类当时分为了：文本级、容器级。

从HTML的角度来讲，标签分为：

文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。

注意 : 为什么说P是文本级标签呢? 因为P里面只能放文字或图片或表单元素 , P里面不能放 h 和 ul p里面也不能放 p .

现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：

行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素可以转换为行内元素：

给一个块级元素设置成行内元素: display : inline

这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div可以和别人并排了

行内元素转换为块级元素：

给一个行内元素设置成块级元素 : display : block

这个个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span能够设置宽度、高度
此时这个span必须霸占一行了，别人无法和他并排
如果不设置宽度，将撑满父亲

display

display : 块级元素与行内元素的转换 :

display: block :将标签立即变成块级元素.

独占一行 / 可以设置宽高, 如果不设置,则默认父盒子宽高的100%

display: inline :将标签变成行内元素

　　　　　　　　在一行内显示 / 不可以设置宽高 ,根据内容显示宽高.

display: inline-block :行内块

　　　　　　　　　　在一行内显示 / 可以设置宽高 .

display: none :不显示,隐藏 ,不在文档上占位置.

visibility: hidden :隐藏 ,在文档上占位置.

脱离标准流

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

浮动　

浮动是 css 里面布局最多的一个属性, 也是很重要的一个属性 .

float : 表示浮动的意思 , 他有四个值 .

　　float none : 表示不浮动

　　float left : 表示左浮动

　　float right : 表示右浮动

注意 : 当盒子向右/左浮动时 , 如果有左/右浮动的盒子,那么会贴近以浮动的盒子,没有就去贴边.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*<!--将屏幕没有缝隙-->*/
        *{
            padding:0;
            margin: 0; 
        }
        /*这个div是将高为40px的一条全部沾满*/
        .top-Bar{
            width:100%;
            height: 40px;
            background-color: #333; 
        }
        /*需要的长度1226,高40,居中--绿色到黄色右边的举例*/
        .container{
            width: 1226px;
            height: 40px;
            /*background-color: red;*/
            margin-right: auto;
            margin-left: auto;
        }
        .top-Bar .top-l{
            width: 550px;
            height: 40px;
            background-color: green;
            /*浮动,要不然div是换行的*/
            float: left;
        }
        .top-Bar .top-shop{
            width: 100px;
            height: 40px;
            background-color: yellow;
            float: right;
        }
        .top-Bar .top-info{
            width: 200px;
            height: 40px;
            background-color: purple;
            float: right;
            /*距离右边距20px*/
            margin-right: 20px;
        }
    </style>
</head>
<body>
    
    <div class="top-Bar">
        <div class="container">
            <div class="top-l">
                
            </div>
            <div class="top-shop"></div>
            <div class="top-info"></div>
        </div>
    </div>
</body>
</html>

示例

浮动的四大特性 :

　　1 , 浮动的元素脱离标准流

　　2 , 浮动的元素互相贴靠

　　3 , 浮动的元素有"字围" 的效果

　　4 , 收缩效果 : 一个浮动元素 , 如果没有设置 ,width , 那么自动收缩为文字的宽度 ,

块级元素和行内元素

注意 : 要浮动一起浮动 , 有浮动 ,要清除浮动

浮动的好处与缺点 :

　　--- 好处 : 使元素实现并排/就在页面上占位置

　　---缺点 : 子盒子浮动 , 不在页面占位置 , 如果父盒子不设置高度 , 那么撑不起父盒子的高度 , 页面会出现紊乱

清除浮动 :

清除浮动的方法 :

　　1 , 给父盒子设置高度 (后期不好维护)

　　2 , clear : both

　　3 , 伪元素清除法

　　4 , overflow : hidden

有三个值 :

left : 清除当前元素左边的浮动元素

right : 清除当前元素右边的浮动元素

both : 清除当前元素两边的浮动元素.

给浮动元素的后面加一个空的 div , 并且该元素不浮动 , 然后设置 clear (在该元素上面表示清除左边)

示例 :

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 给浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both  清除别人对我的浮动影响-->
            <!-- 内墙法 -->
            <!-- 无缘无故加了div元素  结构冗余 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

html

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

css

伪元素清除法

给我浮动元素的父盒子 , 也就是不浮动元素 , 添加一个clerafix 的类 , 然后设置 :

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}

一般都是这样写 :

        .clearfix:after{
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden
            }

overflow: hidden 清除法

overflow 属性规定当内容溢出元素框时发生的事情 ,

　说明:

　　这个属性定义溢出元素内容区的内容如何处理, 如果值为scroll , 不论是否需要 ,用户代理都会提供一种滚动机制, 因此, 有可能使元素框中可以放下所有的内容也会出现滚动条 .

有五个值 :

其实这是一个 BFC 区域: https://blog.csdn.net/riddle1981/article/details/52126522

记住 : BFC 内的元素之间互不影响.

秒客网