CSS入门08

• 清除浮动
  • clear 清除浮动带来的影响
    • 加一行空元素：<div style="clear:both;"></div>
    • none 默认值 允许浮动元素出现在两侧
    • left 清除左侧浮动带来的影响
    • right 清除右侧浮动带来的影响
    • both 清除左右两侧浮动带来的影响
  • 伪元素 通过css渲染生成
    • .box::after在box内容之后加内容
    • .box::before在box内容之前加内容
  • 清除浮动的方式
    • 设置一个类选择器，如：.clearfixed{clear:both;}，
      • 在body内编程时，加在所需的元素标签上
      • 在需求元素的标签内部加一个空div，<div class="clearfixed"></div>
    • 添加伪元素
      • 元素名/类名::after/before{content:"";…}，注意content内容可为空，但不能省略；
      • 通过伪元素向list类前面加定点向右的小三角，可通过如下设置：
        • .list::before{display:inline-block; content=""; width=0; height=0; border:4px solid rgba(0,0,0,0); border-left-color:blue; }
      • 通过伪元素清除浮动影响：
        • .clearfixed::after{display:block; content:""; clear:both; }
        • 程序中凡是添加名为clearfixed的类，都会清除浮动带来的影响
• 二级菜单
  • 可使用<ul><li> <ul><li></li>…</ul> </li>…</ul>来实现
  • 注意，二级菜单ul的display初始赋值为none；待一级菜单的li触发hover时，display再次复制block；以上操作可实现鼠标滑过一级菜单的li时，出现相应的下拉列表。