day16-CSS-清除浮动

浮动练习

• 1.开发中什么时候使用标准流什么时候使用浮动流？
  • 网页通常的排版是垂直方向按照标准流，水平方向是浮动流
• 2.复杂界面如何进行布局？
  • 1️⃣从上到下：标准流
  • 2️⃣从外向内：可细化成垂直和水平
  • 3️⃣水平方向划分成左右再分别布局：里面可能包含垂直方向和水平方向

浮动高度

• 1.在标准流中内容的高度宽度可以撑起父元素的高度和宽度
• 2.浮动元素不能撑起父元素的高度和宽度

如何清除浮动？

• 1️⃣方式一：给前一个标签设置高度 --- 不是最优，开发中能不写高度就不写高度
• 2️⃣方式二：clear属性 --- 给后一个标签添加clear属性
  • 取值：默认是none -- 按照浮动元素排序规则
  • left：不找前左浮动元素不显示在同一行
  • right：不要找前面右浮动元素
  • both：最常用---既不找左浮动也不找右浮动
  • 注意点：若添加了clear属性的标签，margin属性则会失效
  • 失效原因：若前一个元素浮动，则在父元素中失去位置，若设置margin属性，且父元素没有边框，父元素会和该元素一起移动
• 3️⃣方式三：
  • ①隔墙法
  • ②外墙法：在两个盒子中间添加一个块级元素并设置第二个盒子clear：both属性
    • 可以设置第二个盒子的margintop
    • 不可以设置第一个盒子的marginbottom会失效
    • 举例：搜狐首页
  • ③内墙法：在第一个盒子的所有子元素最后添加一个块级元素，给额外的这个块级元素设置clear:both属性
    • 可以设置第二个盒子的margintop
    • 可以设置第一个盒子的margin bottom
  • ④外墙法和内墙法的区别！！！---内墙法可以撑起第一盒子的高度，外墙法不可以
  • 注意：外墙法和内墙法添加了很多多余的块级元素，其实也不推荐使用来清除浮动

伪元素选择器

• CSS3新增，作用是给指定标签内容前面或后面添加一个子元素
• 格式：标签：：before/after{content:""}
• 用途---清除浮动方式四

第一个标签::after{
    content:"";
    display:block
    height:0;
    visibility:hidden;
    clear:both;
}

• 设置子元素内容为空
• 设置子元素为块级元素
• 设置子元素看不见
• 设置clear:both
• 十分符合前端开发思想，避免了不必要的元素，利用样式解决了方案 --- IE6不兼容
• 解决方法

第一个元素{
    *zoom:1;
}

清除浮动方式六

• 补充
  • 1️⃣overflow：hidden作用：
    • ①超出标签内容范围的内容裁剪掉
    • ②还可以清除浮动
    • ③保证两盒子，里面盒子设置margintop属性外面的盒子不设置边框也不会定下来
• 格式 --- 一行代码可以清除浮动，IE6不兼容

第一个标签：{
      overflow：hidden
}