1 实例演示如何消除子元素浮动造成父元素高度折叠的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 300px;
border: 1px dashed chocolate;
}
.box2 {
width: inherit;
height: 300px;
background-color: lightblue;
}
/*浮动后脱离文档流, 父区块无法再包裹住*/
.box2 {
float: left;
}
/***** 解决方案4: 父元素添加overflower,专用来清浮动 *****/
.box1 {
/*overflow: auto;*/
overflow: hidden;
}
/*显然第4种方案最简单, 工作中首选第五种*/
</style>
</head>
<body>
<!--为什么要清浮动?-->
<!--当有嵌套关系的元素时, 父元素的高度应该由子元素撑开-->
<!--元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住-->
<!--<div style="border: 2px solid; float: left;">-->
<div class="box1">
<div class="box2"></div>
</div>
<!--</div>-->
</body>
</html>运行效果
关于理解
overflow: hidden;
overflow:hidden 的意思是超出的部分要裁切隐藏掉
那么如果 float 的元素不占普通流位置
普通流的包含块要根据内容高度裁切隐藏
如果高度是默认值auto
那么不计算其内浮动元素高度就裁切
就有可能会裁掉float
所以如果没有明确设定容器高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动的高度就要被计算进去
顺带达成了清理浮动的目标
还有群里说一段话虽然不是很理解但是我觉得有用就放在博客里如下
关于CSS中为什么overflow:hidden能清楚浮动float的影响 一、有overflow:hidden 对于overflow:hidden的功能就是说超出部分不显示，达到一个效果“让子元素只在父元素内显示” （1、是剪掉外面的 2、撑开显示）对应下面两种情况。 有两种情况： 1、有宽度高度值（是剪掉外面的 ）：这样会剪切掉父元素外的子元素 ，达到“让子元素只在父元素内显示”的效果。（这才是overflow:hidden的正确用法） 2、无宽度高度值（撑开显示），这样就没有固定边界让它无法识别那是为那是内， 但是还是要达到“让子元素只在父元素内显示”的效果，这样寻找边界以达到这种效果， 我们不难发现在最大显示子元素（也就是子元素的边上时）刚好能达到“让子元素只在父元素内显示”的效果。 即使有了 ”float：left；“ 浮动分离了父子元素，分离是分离但是还是父子啊（就像断绝父子关系， 但是血浓于水，生理上有遗传），只要是父子也能满足这句话达到“让子元素只在父元素内显示”的效果。 （这个是技巧） 二、无overflow:hidden 也有两种 1、有宽度高度值，显示为溢出 2、无宽度高度值，就会被撑开（因为没有分离父子），加了”float：left；“ 浮动分离了父子元素，而且又没有overflow:hidden强制达到“让子元素只在父元素内显示”的效果， 所以不撑开，反而父块的高度塌陷消失
因为虽然消除子元素浮动造成父元素高度折叠的影响的方法有五种但是overflow: hidden;是工作中常用的方法。所以我就研究它毕竟.其他几种方法理解。但是用不到。那我就不用理解那么透彻
2.实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*页面容器*/
.container {
width: 1000px;
margin: 0 auto;
}
/*头部与底部共用样式*/
.header,
.footer {
overflow: hidden;
height: 60px;
background-color: lightgrey;
}
/*主体*/
.main {
/*min-height: 800px;*/
margin: 5px auto;
background-color: lightblue;
}
/*主体三部分的基本样式*/
.left {
width: 200px;
/*设置最小高度,可以确保在没有内容的情况下,仍能显示出高度来*/
min-height: 800px;
background-color: lightgreen;
margin-top: 60px;
}
.content {
/*内容区宽度自适应*/
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
margin-top: 60px;
}
/*方案1: 绝对定位*/
/*定位父级*/
.main {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
}
/*用外边距margin,挤出中间内容区*/
.content {
margin-left: 210px;
margin-right: 210px;
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="left">左侧</div>
<div class="content">内容区</div>
<div class="right">右侧</div>
<div class="footer"></div>
</div>
</body>
</html>运行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*页面容器*/
.container {
width: 1000px;
margin: 0 auto;
}
/*头部与底部共用样式*/
.header, .footer {
height: 60px;
background-color: lightgrey;
}
/*主体*/
.main {
/*min-height: 800px;*/
margin: 5px auto;
background-color: lightblue;
}
/*主体三部分的基本样式*/
.left {
width: 200px;
min-height: 800px;
background-color: lightgreen;
}
.content {
/*内容区宽度自适应*/
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
}
/*方案2: 浮动*/
/*左侧左浮动*/
.left {
float: left;
}
/*右侧右浮动*/
.right {
float: right;
}
/*内容区设置*/
.content {
float: left;
width: 580px;
margin-left: 10px;
}
/*清除子元素浮动影响*/
.main {
overflow: hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="left">左侧</div>
<div class="content">内容区</div>
<div class="right">右侧</div>
<div class="footer"></div>
</div>
</body>
</html>总结
float:
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
clear
clear 属性指定元素两侧不能出现浮动元素。
overflow: scroll;
overflow: hidden;
overflow: auto;
overflow: visible;
之间的区别
可能理解的比较浅显但是我觉得重中之中就是
float:
clear
overflow: hidden;
