web全栈的进阶之路：CSS

最新推荐文章于 2020-09-10 12:32:49 发布

雪玺

最新推荐文章于 2020-09-10 12:32:49 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/qq_41899844/article/details/106441032

版权

02.01 清浮动

浮动又开始就要有清除
1.方法1：父亲加高度高度
因为高度为0，撑不起一个盒子，所以两个父亲盒子才会贴在一起，
怎加高度后，父亲盒子有了高度，儿子盒子再进行浮动，两个父亲也不会靠到一起了。有高度才能关住浮动
在这里插入图片描述

2. 方法2：clear：both；
在网页制作中其实很少加高度，因为内容会撑高。
在父亲盒子中加入clear：both；就可以抵消儿子盒子的浮动

缺点：会导致margin失效，因为盒子没高
3.隔墙法 clear：both；的另一种用法（公共类）
（1）中间再添加一个盒子，清浮动，添加高度，可用于常用css，利用多个类的特点，
在这里插入图片描述
（2）内墙法
在父亲盒子内再加一个盒子，不仅会清浮动，而且会使父亲盒子产生高度。
为什么原本的儿子盒子不能产生高？一个父亲，是不会被一个浮动的儿子撑出高的
优势：会自动根据内容调整高度
在这里插入图片描述
4.方法4： overflow：hidden；
表示溢出隐藏
一个父亲不能被浮动的儿子撑出高度，但只要给父亲加上overflow：hidden；就可以，而且还能跟随内容改变高度。