常见问题
清除浮动
容器中，如果子元素都是浮动的，那么容器的高度将会崩塌，造成定位问题。所以需要找到一种方法去克服浮动带来的问题。
一般是设置一个通用的css类 clearfix，然后将这个类的伪元素 ::after 的显示方式设置为block，然后设置 clear: both;，就可以解除浮动带来的容器高度崩塌的问题。此时，容器的高度将与最高子元素的高度相同。
这是比较常用的一种，还有很多很多，可戳 css 浮动和清除浮动 了解更多。
单词内断句
主要是两个相关属性：word-wrap 和 word-break。
word-wrap: 是否允许单词内断句。
word-break: 单词内进行断句的方式。
简单来说，word-wrap: break-word; 可以使超长的单词断行显示，而不是溢出容器。
word-break: break-all; 与前者类似。不同的是，word-wrap: break-word;在遇到超长的单词时，会先挪到下一行显示，下一行也显示不完，才将超出宽度的部分挪到下下行显示；而 word-break: break-all; 就不管三七二十一，一旦某行出现过长单词，直接从这行开始截断，过长部分在下一行显示。
word-wrap有两种属性：
- normal 只在允许的断字点换行（浏览器保持默认处理）。
- break-word 在长单词或 URL 地址内部进行换行。
word-break有三种属性：
- normal 使用浏览器默认的换行规则。
- break-all 允许在单词内换行。
- keep-all 只能在半角空格或连字符处换行。
类似的属性用在什么地方？通常是一些含有文字描述之类的容器中，超出容器大小的文字显示省略号等等。
单行文字超长时，显示省略号：
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis;
多行文字过长时，显示省略号(这个要考虑兼容性问题)：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
但有的网站的就比较直接：
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
详情可戳 word-wrap和word-break的区别，有超详细例子。
block、inline、inline-block的区别
block: 可以设置宽高；不设置宽高情况下从新行开始，独占一行; 可以容纳各种元素。
inline: 行内显示；无法设置高度，只能通过设置左右padding、左右margin和边框宽度来影响总体的宽度；只能容纳 inline 元素。
inline-block: 行内显示，不从新行开始；但具有block的各种特性。
这几类 display 方式分别有哪些元素？ 戳 -> display:block、inline和inline-block的区别
浏览器元素样式重置
元素在浏览器中其实有一些默认的样式，在没有考虑样式的时期，这些默认样式对于页面的格式和排版是有一定的辅助作用的。
但是，对于设计要求较高的网站，这些默认样式的存在对元素样式的重新设定会带来一定的困扰，我们更希望从一张白纸开始不受影响地进行构筑。对于粗心的人来说，默认样式的存在也会使其忽略一部分元素样式的设定，而不同的浏览器下，元素的默认样式有可能是不一样的，因此使得产品在不同的浏览器下作出了不同表现，也是不太好的。
当然对于样式重置的讨论，也有两派。
有人提出的一个比较简易的样式重置是这样的。
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul{margin:0; padding:0;}
我觉得还可以。
其实这个问题要经过大量的测试才能有比较合理的结果。
相关： 关于reset.css的疑问：为什么一定要重置浏览器样式？
不常见问题
子元素 margin-top 奇异事件
本想给子元素一个margin-top使其远离容器上方，却没想到容器跟着往下跑了….😅
解决办法有多种，我觉得给父元素加一个 padding-top: 1px; 这种方法不错。还有父元素加 overflow：hidden; 也可以。