我在做页面布局的时候，多多少少总会受到来自浮动的困扰，因此专门通过实践来总结一下浮动与清除浮动。 首先总结几个基础的概念： 浮动：设置浮动的元素会脱离文档流，不会影响块元素的布局，但是会影响内联元素的排列[通常是文本]； 文档流：在文档流中，块元素会单个元素独占一行 接下来我们通过实际演示来看看关于 ...
分类：
其他好文 时间：
2020-04-04 09:51:13
阅读次数：
65
这篇文章会记录我们平时常用到的CSS片段，使用这些CSS可以帮助我们解决许多实际项目问题中遇到的，墙裂建议点赞收藏再看，方便日后查找清除浮动浮动给我们的代码带来的麻烦，想必不需要多说，我们会用很多方式来避免这种麻烦，其中我觉得最方便也是兼容性最好的一种是，在同级目录下再创建一个<div></div>；不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的
分类：
Web程序 时间：
2020-04-02 10:29:33
阅读次数：
101
文章目录万能居中BFC优化盒模型哪两种模式？什么区别？如何设置常用清除浮动的方法，如不清除浮动会怎样？删格化的原理纯css实现三角形高度不定，宽100%，内一p高不确定，如何实现垂直居中？至少两种方式实现自适应搜索设置一段文字的大小为6pxcss菊花图关于em关于vh,vwFlex布局overflow原理实现自适应的正方形:标准模式和怪异模式CSS3实现环形进度条css优先级万能居中1.margi
分类：
Web程序 时间：
2020-04-01 10:32:46
阅读次数：
102
清除浮动 当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响浮动的清理（clear） 值： none：默认值。允许两边都可以有浮动对象 left：不允许左边有浮动对象 right：不允许右边有浮动对象 both：左右两侧都不允许 ...
分类：
其他好文 时间：
2020-03-22 14:00:18
阅读次数：
62
在父dom对象上添加class .clearFloat { content: ""; display: block; visibility: hidden; height: 0; clear: both; } ...
分类：
Web程序 时间：
2020-03-21 12:37:43
阅读次数：
71
title: css 清除浮动 date: 2020 03 10 17:03:10 tags: css 清除浮动 浮动float最开始出现的意义是为了让文字环绕图片而已，后来用于让块级元素并排展示 float 会导致该浮动元素的块级元素的父元素高度塌陷，所以需要清除浮动 清除浮动是指清除由于子元素浮 ...
分类：
Web程序 时间：
2020-03-18 13:18:35
阅读次数：
73
浮动：浮动元素不占用源文档流的位置，所以会对后面或者父级元素的排版产生影响，为解决这个问题，需要在元素中清除浮动，解决浮动元素造成的影响 父级元素因为子元素浮动而高度变为0 1.给父元素定义高度 2.利用after和zoom 添加一个空div 利用clear:both让父div自动获取高度 .cle ...
分类：
其他好文 时间：
2020-03-17 23:47:45
阅读次数：
60
清除浮动-height 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 ul,ol{ 7 list-style: none; 8 } 9 .box{ 10 width: 800px; 11 /* height: 100px; */ 12 border: ...
分类：
其他好文 时间：
2020-03-14 21:55:54
阅读次数：
72
1.为什么清除浮动？ 浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 ...
分类：
Web程序 时间：
2020-03-07 13:29:11
阅读次数：
92
1.BFC（块级格式上下文，用于清除浮动，防止margin重叠等） 块级格式上下文，是一个独立的渲染区域，并且有一定的布局规则。BFC区域不会与float box重叠，BFC是页面上的一个独立的容器，子元素不会影响到外面，计算BFC高度时，浮动元素也会参与计算。 1.1哪些元素会生成BFC 根元素， ...
分类：
Web程序 时间：
2020-03-06 15:11:08
阅读次数：
83
