CSS浮动总结

CSS浮动

1、结构伪类选择器：

        1）作用与优势：

                >  作用：根据元素在HTML中的结构关系查找元素

                > 优势：减少对于HTML中类的依赖，有利于保持代码整洁

                > 场景：常用于查找某父级选择器中的子元素

        2）选择器：

                >  n的注意点：

                        ①  n为：0、1、2、3、4、5、6、......

                        ②  通过n可以组成常见公式

                                

2、伪元素：

        >  伪元素：一般页面中的非主体内容可以使用伪元素

        >  区别：

                ①  元素：HTML设置的标签

                ②  伪元素：由CSS模拟出的标签效果

        >  种类：

                

        >   注意点：

                ①  必须设置 content 属性才能生效

                ②  伪元素默认是行内元素

    
    
    
    
    


    
    
    
爱

3、标准流（文档流）：

        >  标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

        >  常见标准流排版规则：

                ①  块级元素：从上往下，垂直布局，独占一行

                ②  行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

4、浮动：

    
    
    
    
    


    
one
    
two

        1）浮动的作用：

                >  早期的作用：图文环绕

                >  现在的作用：网页布局

        2）浮动的代码：

    
    
    
    
    


    
one
  
    
two

        3）浮动的特点：

                >  浮动元素会脱离标准流（简称：脱标），在标准流中不占位置

                >  浮动元素比标准流高半个级别，可以覆盖标准流中的元素

                >  浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

                >  浮动元素有特殊的显示效果

                        ·  一行可以显示多个

                        ·  可以设置宽高

                >  注意点：

                        ·  浮动的元素不能通过 text-align:center; 或者 margin:0 auto;

        4）浮动的案例：

                >  ①  网页布局案例 -- 小米布局：

                        ·  示例图片：

                         ·  代码：

                >  ②  综合案例 -- 小米模块案例：

                        ·  示例图片：

                         ·  代码：

                >  ③  综合案例 -- 网页导航案例：

                        ·  示例图片：

                         ·  代码：

    
    
    
    
    


    

        

            
新闻1
            
新闻2
            
新闻3
            
新闻4
            
新闻5
            
新闻6
            
新闻7
            
新闻8   
        
    

5、清除浮动：

        1）清除浮动的介绍：

                >  含义：清除浮动带来的影响

                        ·  影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

                >  原因：

                        ·  子元素浮动后脱标 → 不占位置

                >  目的:

                        ·  需要父元素有高度，从而不影响其他网页元素的布局

        2）清除浮动的方法：

                ①  直接设置父元素高度：

                        >  特点：

                                ·  优点：简单粗暴，方便

                                ·  缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

                ②  额外标签法：

                        >  操作：

                                Ⅰ、在父元素内容的最后添加一个块级元素

                                Ⅱ、给添加的块级元素设置 clear:both;

                        >  特点:

                                ·  缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

                ③  单伪元素清除法：

                        >  操作：用伪元素替代了额外标签         

                        >  特点：

                                ·  优点：项目中使用，直接给标签加类即可清除浮动

>  基本写法代码：

>  补充写法代码：

                ④  双伪元素清除法：

                        >  操作：

                                

                        >  特点：

                                ·  优点：项目中使用，直接给标签加类即可清除浮动

                ⑤  给父元素设置 overflow : hidden;

                        >  操作：

                                ·  直接给父元素设置 overflow : hidden;

                        >  特点:

                                ·  优点:方便

6、CSS书写顺序（浏览器执行效率更高）：

        ①  浮动  /  display；

        ②  盒子模型： margin、border、padding、宽度、高度、背景色；

        ③  文字样式。