• 浮动属性(float)


    (1.浮动是一种脱离标准文档流的形式。

    作用:浮动就是用来制作多个盒子并排显示,也能设置宽高,负责网页排版

    1 float:left;  左浮动

    2 float:right; 右浮动

    3 float:none;  不浮动

    浮动的元素,会自动贴着父元素盒子的边。

    左浮动:贴左边;

    右浮动:贴右边;

    重点:浏览器认为浮动的元素是不存在(不会占标准流的位置,占浮动流的位置),所以会影响后面的元素。

    2.浮动的注意事项

    浮动属性可以理解为一个国家,也有自己的宪法:

    1、浮动的元素可以设置widthheightmarginpadding

    2、浮动的元素不区分行块元素,都能设宽高,并排显示,不独占一行

    3、浮动的元素不接受display转换显示模式,因为浮动的元素没有行内、块级元素之分

    4、浮动的元素如不设置宽高,会自动收缩宽度,会根据内容撑开

    5、浮动的元素不占标准流的位置

    6、浮动的元素不能设置margin:0 auto;居中

    3.清除浮动

    为什么要清除浮动?

    描述:因为子元素浮动了不会被父级包住,儿子都浮动了,就脱离标准流,那么父亲还是标准流,就撑不开高度。如果要让它儿子元素的内容撑开高度,就给父亲清除子级浮动对自己造成的影响。

    总结应用场景:当父级没给高度,子级也浮动了,这时就要清除浮动。

    1.clear清除浮动属性(清除浮动的墙放在浮动元素父盒子内部的最后。只要子类浮动,就在父类的最后内部添加清除浮动属性)

    解决:浮动互相影响,高度自适应

    缺点:1html结构布局,很多要进行浮动,每个浮动的盒子都需要添加一堵墙。页面结构会显得很复杂,出了很多没有意义的标签。

         2、一个盒子内的标签要浮动就都浮动,浮动后面的墙是一个标准流元素。

    2.overflow属性

    盒子内部元素可以设置溢出模式,隐藏或自动显示.

    overflow:hidden;

    overflow:auto;

    overflow属性也能清除盒子内部元素的浮动影响,只需要给受影响的父亲加。

    解决了浮动互相影响,高度自适应。

    优势:能解决所有的问题,不会增加无用的标签。

    注意:如果子元素的内容超出父盒子的范围,内容会被隐藏。

    3.伪类清除法

    1、定义.clearfix:after类样式

    1 .clearfix:after{

    2     content:"";

    3     clear:both;

    4     visibility:hidden;/*占位隐藏*/

    5     height:0;

    6     display:block; /*转为块级元素*/

    7  }

    8 .clearfix{zoom:1;/*兼容IE6/7浏览器*/}

    2、在受浮动影响的父级盒子添加这个类

    1 <div class="box1 clearfix">

    2         <p>1</p>

    3         <p>2</p>

    4         <p>3</p>

    5         <p>4</p>

    6 </div>

  • 相关阅读:
    pythonday06数据类型(四)
    pythonday05数据类型(三)
    pythonday04数据类型(二)
    pythonday03数据类型(一)
    Apollo自动驾驶实践——第0讲:导论
    图论学习:生成树的Matrix-tree定理
    2020杭电多校6 Expectation
    2020牛客暑期多校第九场 B Groundhog and Apple Tree
    图论:二分图最大权匹配KM算法
    第十章 百度Apollo实战
  • 原文地址:https://www.cnblogs.com/smivico/p/7656270.html
Copyright © 2020-2023  润新知