美文网首页
清除浮动

清除浮动

作者: Zacks_8407 | 来源:发表于2017-04-20 23:20 被阅读0次

方法:

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之后,外面的盒子不被顶下来。

相关文章

  • 11.22 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 前端06

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 06 前端学习

    清除浮动 clear:left清除左浮动clear:right清除右浮动clear:both清除对它影响最大的浮动...

  • 清除浮动

    未清除浮动前 清除浮动后

  • 技术知识点整理

    清除浮动 BFC清除浮动浮动的父级末尾插入块级元素清除浮动 BFC(Block Formatting Contex...

  • H5前端开发学习笔记——0x15清除浮动

    清除浮动 课时130 浮动元素高度问题(掌握) 课时131 清除浮动方式一(理解) 课时132 清除浮动方式二(理...

  • css清除浮动

    前端开发中浮动处处可见,本文探讨浮动的成因以及如何更加有效的清除浮动。 1、浮动与清除浮动 2、清除浮动 基本cs...

  • CSS清除浮动三种方式

    清除浮动 当父盒子没有定义高度,嵌套的盒子浮动之后,下边的元素发生位置错误。 清除浮动不是不用浮动,清除浮动产生的...

  • 布局浮动的问题

    浮动的问题 什么是浮动?浮动(float)的副作用清除浮动两种清除浮动的办法如下:

  • 清除浮动

    一、清除浮动 or 闭合浮动 ? 清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:lef...

网友评论

      本文标题:清除浮动

      本文链接:https://www.haomeiwen.com/subject/ucdrzttx.html