HTML+CSS 面试题-容器包含若干浮动元素时如何清理(包含)浮动？display,float,position的关系？Flex布局有什么优势？

谁借莪１个温暖的怀抱￠ 2023-06-11 03:20 3阅读 0赞

## 容器包含若干浮动元素时如何清理(包含)浮动 ##

容器元素闭合标签前添加额外元素并设置clear: both

父元素触发块级格式化上下文

*  块级格式化上下文，它是一个独立的渲染区域，这个区域与外部毫不相干。
 *  触发条件：
    
     *  根元素（例如：html）
     *  元素浮动了（float 不为 none）
     *  position 为 absolute 或 fixed
     *  display 为 inline-block、table-sell、flex…
     *  overflow 不为 visible

设置容器元素伪元素进行清理（推荐的清理浮动方法）

## display,float,position的关系 ##

如果一个元素的display属性被设置为none，那么就不会生成元素对应的框，这种情况下，float和position被忽略

display非none，如果一个元素的 position属性被设置为absolute或者fixed，这种情况下，float被忽略（float计算的值为 none），框的位置取决于属性top，right，bottom，left以及box的容器

display非none，并且position非absolute、fixed，如果float的值不为null（为left或者right），那么box是浮动的并且display的值为 block

display非none，并且position非absolute、fixed，float为none，display非none，并且position非absolute、fixed，float为none

display非none，并且position非absolute、fixed，float为none，不是根元素，那么就按照被指定的display的属性值来显示

## Flex布局有什么优势 ##

传统布局基于盒模型，依赖display属性 position属性 float属性

传统布局对于一些场景非常不方便，比如说垂直居中

2009年，w3c提出了一种新的方案 Flex布局，可以简便完整的响应式的实现各种各种页面布局。目前他得到了所有浏览器的支持。

Flex布局即弹性布局，用来为盒装模型提供最大的灵活性

任何一个容器都可以指定为Flex布局 display：flex

设置flex布局以后，子元素的float clear vertical-align属性将失效

采用flex布局的元素成为flex容器 所有的子元素成为flex项目

Flex容器的属性有：

*  justify-content 主轴对齐方式
 *  Align-items 侧轴对齐方式
 *  Flex-direction 弹性排列方向
 *  Flex-wrap 是否换行
 *  Flex项目属性 order 项目排列顺序
 *  Flex-grow项目方大比例
 *  Flex-shrink项目缩小比例

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是浮动（float）？如何清除浮动？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 浮动（Float）和清除浮动 ⭐ 浮动的使用 ⭐ 清除浮动 1. 空元素法（Empty E

àì夳堔傛蜴生んèń/ 2023年10月14日 19:33/ 0 赞/ 58 阅读

相关浮动布局

浮动： 1.浮动是布局的一种方式：也是元素脱离文档流的方式 2.浮动 float 3.浮动范围：只能在父容器内部浮动，

谁践踏了优雅/ 2023年06月12日 09:20/ 0 赞/ 65 阅读

相关 HTML+CSS 面试题-容器包含若干浮动元素时如何清理(包含)浮动？display,float,position的关系？Flex布局有什么优势？

容器包含若干浮动元素时如何清理(包含)浮动容器元素闭合标签前添加额外元素并设置clear: both 父元素触发块级格式化上下文块级格式化上下文，它是一个独

谁借莪１个温暖的怀抱￠/ 2023年06月11日 03:20/ 0 赞/ 4 阅读

相关 CSS-什么是标准文档流，元素的浮动，浮动元素的特点

在以前浮动多来控制图片，实现文字环绕图片的效果（字围效果）；现在主要利用浮动的特性（脱离标准文档流）来实现页面的布局标准文档流元素在排版布局过程中会默认自动从

Bertha 。/ 2023年06月02日 09:30/ 0 赞/ 78 阅读

相关前端高频面试题：CSS为什么要清除浮动？如何清除浮动？

CSS为什么要清除浮动？如何清除浮动？由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。清除浮动的

向右看齐/ 2022年10月31日 00:53/ 0 赞/ 187 阅读

相关 html元素设置浮动,html浮动元素

1. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定

秒速五厘米/ 2022年10月09日 13:29/ 0 赞/ 294 阅读

相关浮动元素与定位元素的关系

<style> .a { / float: left; / height: 100px; width: 1

怼烎@/ 2022年09月11日 11:24/ 0 赞/ 192 阅读

相关浮动布局：浮动布局的特点，缺陷以及如何清除浮动

文章目录浮动布局 1. 认识浮动 2. 浮动特点 3. 浮动和inline-block 的区

末蓝、/ 2022年09月02日 13:54/ 0 赞/ 348 阅读

相关 html浮动布局

浮动布局：之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并

桃扇骨/ 2022年05月29日 12:56/ 0 赞/ 440 阅读

相关 div的浮动、清除浮动和布局

总结: 1.无序列表去除前面的小点点：list-style-type: none; 2.设置左浮动的间距。外边距：margin :如果设定4个值就是，上右下左的顺序设

川长思鸟来/ 2021年11月22日 08:06/ 0 赞/ 357 阅读