css学习第四天

八，浮动

                浮动模型：不同于标准流，元素挨着元素进行排列；

                浮动的元素都脱离了标准文档流，不再占有原来的位置。

                浮动出现的初衷是为了解决文字环绕的效果（内容让出浮动部分，但是元素没有让出）；

                设置float就可以设置浮动效果：left 左； right 右； none  默认不流动。

九，浮动特征

                1.按照浮动的方向挤在一行

                2.可以设置宽高，内外边距和border

                3.外边距不会合并

                4.默认的宽高由内容撑开

                5.浮动的元素，可以通过更改浮动方向改变位置

                6.浮动的元素不占据空间（脱标，脱离了标准文档流）

                7，父盒子内的所有盒子都浮动了，父盒子就没有高度了

                8.为了不影响后面元素的渲染，后面的元素要清除浮动

十，伪元素

         伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

• :before 在元素前面插入文本

• :after 在元素后面插入文本

  注：伪元素是css里设置，必须设置content否则伪元素不生效

      /* 伪元素 */
      /* 标签前面插入 */
      h1:before {
          /* 必须设置 */
          content: "hello";
          background-color: green;
          /* 默认是行内元素，可以修改元素类型 */
          display: block;
      }
      /* 标签后面插入 */
      h1:after {
          content: "爱创乐育";
          font-size: 100px;
          background-color: gold;
      }

  十一，清除浮动

                        1.方案一：给父元素设置高度

                                问题：不够灵活，适用性不强。

                        2.方案二：外墙法

                                在盒子外面设置一个没有宽高的盒子设置clear：both清除所有浮动

                                问题：添加了额外的元素，破坏了原有的结构，父元素仍然没有高度

                        3.方案三:内墙法

                                在盒子内部的最后设置一个盒子，设置clear：both

                                问题：额外添加了元素，破坏了原有结构，在一些特定标签下不能设置内墙。

                        4.方案四：父元素浮动

                                父元素也设置浮动

                                问题：破坏原有结构

                        5.方案五：设置行内块

                                将父元素设置为行内块元素

                                问题：破坏原有结构

                        6.方案六：设置溢出隐藏

                                设置一个overflow：hidden

                                问题：溢出的部分会被裁剪

                                设置一个overflow：soccer

                                问题：始终出现滚动条

                                设置一个overflow：auto

                                溢出部分出现滚动条，没有溢出不出现

                                设置overflow：visible

                                溢出部分显示并不能清除浮动

                           7.利用伪元素清除

                                问题：无法复用                      

    .list:after {
        /* 必须设置 */
        /* content: ""; */
        /* clear: both; */
        /* 转成块元素 */
        /* display: block; */

                                8.抽象clearfix类

    .clearfix:after {
        content: "";
        clear: both;
        display: block;
    }

                在需要清除浮动的盒子直接定义类名

标签：浮动,content,盒子,元素,学习,设置,第四天,文本,css
来源： https://blog.csdn.net/zhwqqqqq/article/details/123141814