1.为什么清除浮动？ 浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。 ...
分类：
Web程序 时间：
2020-03-07 13:29:11
阅读次数：
92
背景相关： background-color：背景颜色；（只能填颜色） 【背景图】background-image：url（“图片地址”）； background-image：url（“图片地址”）；是css样式，不占据页面位置， 相当于画了一幅画，背景图默认平铺， img是标签，是结构，相当于挂了 ...
分类：
其他好文 时间：
2020-03-04 12:41:19
阅读次数：
64
高度塌陷的产生条件：父元素没有设置高度，所有的子元素都浮动 父元素在文档流中高度默认是被子元素撑开的, 1 <!DOCTYPE html> 2 <html 3 <head> 4 <meta charset="utf-8"> 5 <title>解决高度塌陷</title> 6 <style type= ...
分类：
其他好文 时间：
2020-03-01 20:19:44
阅读次数：
68
目录： 1. CSS浮动属性float详解 2. CSS常见页面布局 3. CSS浮动清除和清除浮动的几种方法 4. 高度塌陷的产生条件和解决方法 ## CSS浮动属性float详解 *首先，我们需要了解什么是浮动？浮动是指(浮动的特点)：- 将元素排除在普通流之外，即元素将脱离标准文档流。- 元素 ...
分类：
Web程序 时间：
2020-03-01 17:10:05
阅读次数：
87
清除浮动 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 塌陷的问题。 清除浮动的方法 在CSS中，clear属性用于清除浮动，其基本语法格式如下： 额外标签法 通过在浮动元素末尾添加一个空的标签（块级元素）例如 父级添加overflow属性方法 可以给父级添加： overflow为 hi ...
分类：
Web程序 时间：
2020-02-29 00:28:39
阅读次数：
102
高度塌陷产生的原因: 高度塌陷： 当所有的子元素浮动的时候，且父元素没有设置高度，这时候父元素就会产生高度塌陷。 例如： .father{ width: 600px; /* 给父元素一个宽度 */ background-color: #008000; /* 给个背景颜色 */ } .child_1{ ...
分类：
其他好文 时间：
2020-02-23 22:20:12
阅读次数：
75
1、在清除浮动前我们要了解两个重要的定义： 浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。 高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）。 知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这 ...
分类：
Web程序 时间：
2020-02-23 20:39:12
阅读次数：
88
Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。 但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。 就像下面这样 <html> <head> <meta charse ...
分类：
其他好文 时间：
2020-02-23 14:48:45
阅读次数：
54
溢出的概念： overflow属性： visible:默认值。内容不会被裁剪，会呈现在元素框之外。 hidden：内容会被裁剪，并且其余内容是不可见的，此属性可以清除浮动、清除margin-top塌陷的功能。 scroll:内容会被裁剪，但是浏览器会显示滚动条以便查看其余的内容 auto:如果内容被 ...
分类：
其他好文 时间：
2020-02-09 12:06:09
阅读次数：
86
margin-top塌陷是怎么回事呢？ 两个盒子嵌套的时候，内部盒子的margin-top会加到外面的盒子上面，导致盒子的margin-top塌陷。这是一个系统级别的bug. 解决的办法有： 1.给盒子加上一个边框，缺点是盒子会有一个边框影响美观 2.外部盒子设置overflow:hidden；缺点 ...
分类：
其他好文 时间：
2020-02-09 11:35:41
阅读次数：
53
