浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？ 即使是经验丰富的开发者也会在浮动上出错，所以理解浮动的行为能帮你摆脱面对CSS的很多困扰。即使你认为你已经了解了关于浮动的所 ...
分类：
Web程序 时间：
2020-05-21 23:51:13
阅读次数：
70
BFC概念：浮动元素和绝对定位元素，非块级盒子的块级容器 ,以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文） 补充概念： 浮动元素：float脱离文档流，相对于父元素显示；后面的块级元素和内联元素相对浮动元素，边框和背景忽略浮动元素；【块级元 ...
分类：
其他好文 时间：
2020-05-13 15:21:02
阅读次数：
74
相对定位(relative)是相对于自己原本的位置进行偏移，但他仍在标准文档流中，且偏移前的位置会被保留 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定位</title> <style>div{ margin ...
分类：
其他好文 时间：
2020-05-05 15:09:38
阅读次数：
59
在css中，我们有时会用到浮动属性。 简单来说，标准流文档中，块元素会占据整行来显示，比如div，h标签等。后面的标签会依次往后。 但是用了浮动之后，就会脱离文档流，意味着后面的标签可能会被挡住，引起布局混乱。因为浮动元素无法撑起父元素的高度（高度塌陷）。 那么又想使用浮动属性，又想让后面元素按标准 ...
分类：
其他好文 时间：
2020-05-05 10:36:33
阅读次数：
49
清除浮动原因 前端布局用的最多的是float：脱离文档流，浮动起来。浮动的框可以左右移动，直到遇到另一个浮动框或者遇到外边缘的包含框（BCF）。正是因为当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局，会造成父级元素高度坍塌。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当 ...
分类：
其他好文 时间：
2020-05-02 10:02:23
阅读次数：
54
一般情况下 页面元素的定位方式是根据文档流也就是说默认的从上到下，从左到右的方式进行排列的，而将元素从文档流脱离出来显示的方式有两种，一种是 position 定位另一种是float 浮动，这里我们详细介绍下position的用法。 position 常用的四种属性： 1 static（默认属性） ...
分类：
其他好文 时间：
2020-04-25 10:51:19
阅读次数：
367
浮动元素会脱离文档流，向左/向右浮动（float:left||right），直到碰到父元素或另一个浮动元素；可能会有覆盖普通元素的风险，若普通元素在浮动元素之后，就会被覆盖，因为浮动元素不占正常文档流位置，普通元素移动到浮动元素的位置，被浮动元素覆盖； clear清除浮动：clear属性不允许被清除 ...
分类：
其他好文 时间：
2020-04-25 09:14:10
阅读次数：
72
浮动元素的四大特性： 1.浮动的元素脱标（脱离标准文档流） 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 清除浮动的四种方法： 给父盒子设置高度 clear:both 伪元素清除法 overflow：hidden 伪元素清除法： div::after{ display: bl ...
分类：
Web程序 时间：
2020-04-21 15:29:42
阅读次数：
89
行内元素： 与其他行内元素并排； 不能设置宽、高。默认的宽度，就是文字的宽度。 块级元素： 霸占一行，不能与其他任何元素并列； 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100% 块级元素可以转换为行内元素： 一旦，给一个块级元素（比如div）设置： display: inline; 那 ...
分类：
Web程序 时间：
2020-04-21 14:49:23
阅读次数：
82
网页布局方式 1.什么是网页的布局方式? 就是浏览器如何对网页中的元素进行排版. 2.标准流(文档流/普通流)排版方式 浏览器默认的排版方式就是标准流排版方式 在CSS中将元素分为三类, 分别是块级元素 行内元素 行内块级元素 标准流中有两种排版方式,一种是垂直排版 一种是水平排版 垂直排版如果元素 ...
分类：
Web程序 时间：
2020-04-20 11:55:02
阅读次数：
68
