css 盒模型文档流几种清除浮动的方法

gitmilk 发布于2019-04-23 13:24 / 3452人阅读

摘要：但是不会超出内边距的范围。漏加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏给了标准流的盒子。清除浮动清除浮动主要为了解决父级元素因为子级浮动引起内部高度为的问题。

盒模型

1、box-sizing: content-box 是普通的默认的一种盒子表现模式

    盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing:border-box 以盒子边框为界 自己管理里面的元素

    border-box  盒子大小为 width    就是说  padding 和 border 是包含到width里面的

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内(inset)/外阴影；

文档流

普通流（标准流）

浮动

定位

浮动

浮动出现:解决文字环绕的效果

后来发现浮动可以做很多事

浮动会脱离标准流 不会占有原来的位置

浮动 是找的离他最近的父元素

浮动的对齐方式是顶部对齐

 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

浮：    加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面。

漏：    加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。

特：    特别注意，这是特殊的使用，有很多的不好处，使用要谨慎。

清除浮动

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。

我们有时候不方便给父盒子高度 或者不知道父盒子的高度 这个时候就需要清除浮动

怎么去清除浮动?

    clear:both 同时清除左右两侧浮动的影响

1.给父盒子设置高度

*2.额外标签法 : 添加一个额外的标签  clear:both   起到分离上部分和下部分的作用

        影响了本身html结构

3.给父盒子一个display:table  但是有缺陷  建议 不要使用

*4.overflower:hidden  溢出隐藏

*5.

  .father:after {
        content: ".";/* 这里不建议大家使用"" */
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
      }

6. *zoom:1;处理ie6以下的版本兼容问题

*7.双伪元素清除浮动

  .clearfix:before,.clearfix:after { 
          content:".";
          display:table;
        }
        .clearfix:after {
         clear:both;
        }
        .clearfix {
          *zoom:1;
        }

混合云服务器托管盒模型的清除方法清除浮动 js缓存的几种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1831.html

CSS规范 > 8 盒模型 Box Model

摘要：当两个及以上外边距折叠，合并后的外边距宽度是发生折叠的外边距中的最大宽度。如果该元素的外边距同其父元素的上外边距折叠，则该盒的上边框边缘同其父元盒的上边框边缘相同。 2017-07-20: 关于外边距折叠, 推荐问题: https://segmentfault.com/q/10... 8 盒模型 Box Model URL: http://www.w3.org/TR/CSS2/box...

suemi 2019-08-28 18:14 评论0 收藏0
前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
css魔幻属性跟进篇

摘要：中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么，可以理解为内联元素没有盒模型，其高度由内容决定。白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一...

oogh 2019-08-30 14:16 评论0 收藏0
前端整理——css部分

摘要：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部浮动，但左右两栏加上负让其跟中间栏并排，以形成三栏布局。双飞翼布局，为了中间内容不被遮挡，直接在中间内部创建子用于放置内容，在该子里用和为左右两栏留出位置。（1）盒模型（普通盒模型、怪异盒模型） 1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE...

chaosx110 2019-04-23 11:56 评论0 收藏0
CSS规范 > 9 视觉格式化模型 Visual Formatting Model

摘要：盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。视觉格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻译，译者在原文基础上...

魏宪会 2019-08-28 18:15 评论0 收藏0