overfloat textoverflow 高度塌陷

本文主要是介绍overfloat textoverflow 高度塌陷，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在上课的空闲偷偷写一下笔记

overfloat

溢出属性（容器的）

overflow: visible / hidden(隐藏) / scroll(滚动) / auto(自动) / inherit;
visible: 默认值，内容不会被修剪，会出现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的;
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>overflow</title><style>div{width: 200px;height: 200px;float: left;margin-right: 20px;}.inherit{overflow: inherit;width: 100px;height: 100px;background: khaki;float: left;}.hidden{overflow: hidden;background: lightblue;}.scroll{overflow: scroll;background: lightblue;}.visible{overflow:visible;background: lightblue;}.auto{overflow:auto;background: lightblue;}</style>
</head>
<body><div class="visible"><div class="inherit">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</div>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。        </div><div class="hidden"><div class="inherit">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</div>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。        </div><div class="scroll"><div class="inherit">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</div>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。        </div><div class="auto"><div class="inherit">汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</div>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。     </div>    
</body>
</html>

高度塌陷问题(soluteheight.html)

在文档流中，
父元素的高度默认是被子元素撑开的，
也就是子元素多高，父元素就多高。
但是当子元素设置浮动之后，子元素会完全脱离文档流，
此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

高度塌陷：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>解决高度塌陷</title><style>.box1 {width: 100px;height: 100px;background: lightgreen;margin-right: 10px;float: left;}.all1 {width: 1000px;background: lightpink;/* 加入hidden，没有设置高度的父盒子就会显示  */overflow: hidden;}.all2 {width: 800px;height: 400px;background: lightseagreen;/* 如果没有加hidden，父盒子就会移动子盒子的margin-top距离 */overflow: hidden;}.box2 {width: 200px;height:200px;background: lightblue;margin-top: 100px;}</style>
</head>
<body><div class="all1"><div class="box1"></div><div class="box1"></div><div class="box1"></div></div><div class="all2"><div class="box2"></div></div>
</body>
</html>

文本溢出显示省略号(textoverflow.html)

文本溢出：text-overflow:clip/ellipsis
clip:不显示省略号（...），而是简单的裁切
ellipsis:当对象内文本溢出时，显示省略标记

text-overflow属性仅是...，当文本溢出时是否显示省略标记，
并不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需定义

1、容器宽度:width.value;
2、强制文本在一行内显示：white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本溢出显示省略号</title><style>.div1{width: 200px;height: 100px;background: lightseagreen;/* 强制文本在一行内显示 */white-space:nowrap;/* 溢出文本隐藏 */overflow: hidden;/* 溢出文本显示省略号 */text-overflow: ellipsis;}.div2 {width: 200px;height: 100px;background: lightseagreen;/* 强制文本三行显示省略号 */display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;margin-top: 10px;}</style>
</head>
<body><div class="div1">玉容寂寞泪阑干，梨花一枝春带雨。含情凝睇谢君王，一别音容两渺茫。昭阳殿里恩爱绝，蓬莱宫中日月长。回头下望人寰处，不见长安见尘雾。</div><div class="div2">玉容寂寞泪阑干，梨花一枝春带雨。含情凝睇谢君王，一别音容两渺茫。昭阳殿里恩爱绝，蓬莱宫中日月长。回头下望人寰处，不见长安见尘雾。</div>  </body>
</html>