一、margin 塌陷

父子嵌套元素，垂直方向的margin,父子會粘合在一起，取最大的值。子級不能根據父級定位，好像父級沒有棚。
解決方案，觸發bfc（block format context），使用另一套語法規則
如何觸發一個盒子的bfc,改變父級的渲染規則
position:absolute
display:inline-block
float:left/right
overflow:hidden

也可父級加一個線，border-top:1px solid red;

二、margin 合并
兩個兄弟方向的margin是合并的，取最大值。
解決辦法，加個父級，父級觸發bfc
一般不解決

三、float
子元素加float，變成行級元素,不夠就占行
浮動元素產生了浮動流，塊級元素看不到他們，產生bfc的元素和文本類屬性的元素以及文本都能看到浮動元素。
clear:both,清除浮動流

四、文字溢出
單行文本，溢出用...
? ?white-space: nowrap;
? ?overflow:hidden;
? ?text-overflow:ellipsis;
多行文本
? ?截斷
? ?height:40px;
? ?line-height:20px
五、背景圖片
? ?backgroud-image:url(fy.jpg);
? ?backgroud-size:100px 100px;
? ?backgroud-repeat:no-repeat;//不鋪滿repeat-x,repeat-y
? ?backgroud-position:100px 100px;//left top
六、網速不好的時候,照樣顯示內容
? <a href='http://www.taobao.com' target="_blank">淘寶網</a>
? ?text-indent:200px;
? ?white-space:nowrap;
? ?overflow:hidden;

? ? 第二種方法
? ? padding-top:58px;
? ? height:0;
? ? overflow:hidden;

七、行級元素轉化
? span 在
? position:absolute;
? float:left/right;
? 可以有width:100px;

? 會在內部加屬性display:inline-block
? span 內部有文字，外部的文字會與里面的文字底對齊。
?

總結

以上是生活随笔為你收集整理的margin塌陷与margin合并、浮动流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。