网页布局中常要定义元素的宽度和高度，但很多情况下，希望元素的大小能够根据窗口或者子元素自动调整，这就是PC端的自适应。
优点：能够使网页显示的更灵活，可以适应在不同设备不同窗口和不同分辨率下正常显示
相对于窗口和父元素的自适应写法
宽度设置：当块状元素不设置宽度是，默认宽度就为100%，是父元素的100%，始终与父元素同宽
注：默认情况下，如果没设置宽度，给元素加了绝对定位和固定定位，他的宽度就不会与父元素同宽，而是跟里面的内容同宽
高度设置：
高度自适应：
【实现父元素的宽高自适应】1、相对窗口自适应（设置HTML和body的高度为100%才能生效）
注：百分比设置宽高的时候，都是相对当前元素的父元素进行百分比设置
2、相对元素或内容自适应
1、非浮动元素的父元素高度自适应
实现方法：不设置高度或设置高度为height:auto
2、浮动元素的高度自适应
说明：当前元素不设置高度是，第一级元素浮动以后，父元素会出现高度塌陷
文章图片
文章图片
解决方法：
1、 给父元素设置固定的高度
文章图片
文章图片
缺点：不能让父元素高度自适应
2、 给父元素添加overflow:hidden;
（遵循bfc原则）
文章图片
缺点：超出内容被隐藏
文章图片
文章图片
3、 在浮动元素下添加一个元素设置成{clear:both;
height:0;
overflow:hidden’}
文章图片
文章图片
缺点：生成很多空标记，增加结构负担，造成代码冗余
4.给父元素添加display:table:
文章图片
文章图片
缺点：改变了父元素的元素类型
5、 万能清除法（推荐使用）
.clear-fix:after{content: "";
height:0;
display:block;
clear: both;
overflow: hidden;
visibility: hidden;
}
文章图片
文章图片
推荐阅读
- JavaScript|JavaScript之DOM增删改查(重点)
- html5|各行业工资单出炉 IT类连续多年霸占“榜首”位置
- Shopify如何选品中文教程 – 评估所选品的产品和利基市场的准则上
- Shopify如何选品中文教程 – 评估所选品的产品和利基市场的准则下
- webpack配置|基于webpack3.x的多页面配置（HtmlWebpackPlugin学习篇二 ——动态配置）
- Shopify如何选品中文教程 – 最后一课
- &#x(unicode编码后的汉字)JS转换方法
- 微信小程序页面性能|如何解决微信小程序加载慢的问题（）
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示
- （15）HTML5-分辨率检测