清除浮动

方法:

1.在父元素处设置高度(此方法不推荐)

2.使用clear属性(但是设置margin属性无效)

3.使用clear属性,并给body添加一个边框。

4.外墙法:在两个盒子中间添加一个额外的块级元素,给这个额外的块级元素设置属性clear:both,然后设置高度即可让两盒子有margin

4.内墙法:在第一个盒子中所有子元素的最后添加一个块级元素 ,给这个额外的块级元素设置属性clear:both。

外墙法可以在第二个盒子设置margin-top,不能在第一个盒子设置margin-bottom。

内墙法可以在第二个盒子设置margin-top,能在第一个盒子设置margin-bottom,也可以设置自身高度。

外墙法和内墙法的区别?

外墙法不能撑起第一个盒子高度,内墙法可以撑起第一个盒子的高度。

伪类法清除浮动(和内墙法一样,但是形式不一样)

.box::after{

content:"";

display:block;

height:0;

visibility:hidden;

clear:both;

}

.box{

      *zoom:1;          //此项是处理IE6不兼容问题。

}

overflow清除浮动

作用:

1.隐藏超出元素外部分的内容

2.清除浮动(设置属性:overflow:hidden;即可清除浮动,同时也需做兼容处理。)

.box{

*zoom:1;          //此项是处理IE6不兼容问题。

}

3.可以通过设置overflow:hidden;让里面的盒子设置margin-top之后,外面的盒子不被顶下来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 盒子的高度问题 1.标准流中盒子的高度可以被内容高度撑起来;2.浮动流中浮动的内容不能撑起盒子的高度; 为什么要清...
    壹点微尘阅读 3,122评论 0 0
  • 浮动元素高度问题 在标准流中内容的高度可以撑起父元素的高度 在浮动流中浮动的元素是不可以撑起父元素的高度的 清除浮...
    MGd阅读 2,767评论 0 0
  • 第128课 浮动元素高度问题 1、在标准流中内容的高度可以撑起父元素的高度2、在浮动流中浮动的元素是不可以撑起父元...
    S大偉阅读 1,337评论 0 0
  • 清除浮动 盒子高度问题 在标准流中内容的高度可以撑起盒子的高度 在浮动流中浮动元素内容的高不可以撑起盒子的高 清除...
    Jackson_yee_阅读 2,361评论 0 0
  • 我问过一位教龄好几年的老师,会不会有很多小学生出现成绩突然下滑的情况。老师说,这是肯定的,这个情况还很普遍。一般就...
    梁良公子影评阅读 5,969评论 0 0

友情链接更多精彩内容