美文网首页
清除css float带来的影响的集中方式

清除css float带来的影响的集中方式

作者: lsj980Ya | 来源:发表于2020-12-27 23:41 被阅读0次

css 布局的三种方式

  1. 标准流:按照标签默认的特性摆放盒子(块元素纵向排列)
  2. 浮动流:利用浮动摆放盒子(让块元素排成一行)
  3. 定位流:利用定位摆放盒子

浮动流

1,浮动之后的元素会变成行内块(inline-block)
2,浮动元素不能覆盖文字
2,浮动之后的子元素,不占用标准流的空间,无法撑起父视图的高度

清除浮动带来的影响

a) 给父元素设置高度(不推荐,因为在项目中很多盒子是不固定高度的)
b 在父元素后设定空标签进行清除浮动

clear:both

c) 设定父元素的

overflow:auto

d) 使用伪对象代替空标签

div::after {
    content:""
    display:block
    clear:both
}这是建议的方式

相关文章

  • 清除css float带来的影响的集中方式

    css 布局的三种方式 标准流:按照标签默认的特性摆放盒子(块元素纵向排列) 浮动流:利用浮动摆放盒子(让块元素排...

  • float

    视频地址 float 设计的目的 实现文字环绕图片显示效果 清除 float 带来的影响 float 元素底部插入...

  • Test10

    引用文章: 那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...

  • css清除浮动的三种方法

    摘要:css清除浮动float的三种方法总结,为什么要清除浮动?浮动会有哪些影响? 一.先看现象(display:...

  • 1-浮动

    css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? http://blog.csdn.net...

  • HTML第二课

    CSS控制div样式 1.浮动布局:float 实现两个布局并行显示 2.清除浮动布局 清除本块布局被覆盖的float

  • css清除浮动float

    一、浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性, 导致父级对象盒子不能被...

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要...

  • 浮动和清除(闭合)浮动

    CSS之float and clear float 浮动和清除(闭合)浮动 目录 1.背景介绍 2.知识剖析 3....

  • CSS清除浮动_清除float浮动

网友评论

      本文标题:清除css float带来的影响的集中方式

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