1.额外标签清除浮动 步骤:（1）在浮动元素后直接添加一个空div标签；（2）选中该div标签设置属性clear: both; 使用before和after双伪元素清除浮动、 .给父元素设置overflow: hidden; 注意：如果使用overflow: hidden;清除浮动的时候,必须保证父元素中没有定位超出父元素的的元素 5.对父级设置适合CSS高度
定义和用法 overflow 属性规定当内容溢出元素框时发生的事情。 说明 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。 默认值： visible 继承性： no 版本： CSS2 JavaScript 语法： object.style.overflow="scroll" 可能的值 值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。我希望通过10分钟的阅读，帮助大家轻松掌握网页定位，说清楚浏览器如何计算网页元素的位置，尤其是新引进的sticky定位。 1.position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值static，relative，fixed，absolut，sticky 2.static 属性值 static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。 这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。 3.relative，absolute，fixed relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。 这三种定位都不会对其他元素的位置产生影响，因此元素之间可能产生重叠。 relative 属性值 relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置; 4.absolute 属性值 absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。 它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。 5.fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。 6.sticky 属性值 sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。 因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。
（1）.html元素分为两大类：块元素和内联元素(行内元素); （2）1.display:block; 将元素转换为块元素，是大部分块元素的默认display属性值 2.display:inline; 将元素转换为内联元素，是内联元素(例如a,span)的默认display属性值 3.display:inline-block; 将元素转换为内联块元素，是内联块元素(例如img,input)的默认display属性值 4.display:none; 将元素隐藏不可见 注：如果需要元素再次显示，设置除none以外的其他属性值即可 display:none;和overflow:hidden;的区别 display:none;是整个元素隐藏不可见，不管是否有溢出 overflow:hidden; 是溢出部分隐藏不可见，没有溢出的部分正常显示 5.display:list-item; 将元素转换为列表项这种类型，是li的默认display属性值 注：float对块元素的影响： 给块元素设置float后，会脱离默认文档流，在一行逐个进行显示。 如果默认情况下，块元素没有设置宽度，float后，宽度将由内容撑开 注：float对内联元素的影响 给内联元素设置float后，就隐性的转换为了块元素，原本空格，回车换行符所占据的空间也会消失
