margin-bottom
声明：以下均为个人见解，若有错误请指出。
效果预览：
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
}
.container {
width: 400px;
overflow: hidden;
background-color: pink;
}
.left {
float: left;
width: 200px;
background-color: silver;
padding-bottom: 100px;
margin-bottom: -100px;
text-align: center;
}
.right {
float: left;
width: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<p class="container">
<span class="left">我在左侧</span>
<span class="right">我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</span>
</p>
</body>
</html>
实现机制：
left元素高度根据右侧文字的高度进行自适应。利用padding-bottom正值和margin-bottom负值相互抵消。
当父元素设置overflow: hidden时产生的影响：
（1）触发bfc，使的父元素的高度在计算时包括float元素的高度，子元素left和right的高度中的最大者决定了父元素的高度。此处父元素的高度即为right元素的高度。
（2）left元素中由于背景色可以作用在padding中，而超出right元素高度部分的padding会被父元素设置的overflow: hidden截断。
（3）left元素的margin-bottom抵消掉padding-bottom部分，使得父元素在检测高度时发现左侧的高度低于右侧的高度，因此父元素的高度会与right的高度一致。
当修改margin-bottom的值为-40px时产生的效果：
此时父元素在检测高度时发现左侧高度高于右侧，因此父元素的高度就等于左侧元素的高度。
注意点：事实上第一种情况中left元素的高度(元素框尺寸)等于padding + 文字的高度，其高度要远高于right元素的高度，但是由于父元素中的overflow: hidden，导致对于父元素来说，left元素的高度只有文字的高度，padding部分会被margin抵消掉。也就导致为什么父元素的高度是right元素的高度而不是left元素的高度。
文章最后发布于: 2018-11-28 11:05:54
相关阅读
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> img{ position
【mie haha的博客】转载请注明出处（万分感谢！）：https://blog.csdn.net/qq_40315080/article/details/96186623Android中xml和java相结
分页sql格式是：select * from table limit (start-1)*limit,limit; 其中start是页码，limit是每页显示的条数。分页需求：客户端通过传
说起赚钱这个话题，相信大家都很感兴趣，但是要说起具体怎么赚钱，就没几个人敢发言了。因为大多数普通人都是上着普通的班，拿着一份普通
写在开头 --这篇bigpipe的笔记早在一年前就想写了，但是一直被耽搁了。终于今天再翻看旧ppt时才想起要补上这篇博客。本文中关于big