                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS深入理解之margin

第三個盒子沒有出現(xiàn)margin-top重疊問題，請問是修復了嗎？

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ??? ?.father1,.father2,.father3{
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?margin-right: 10px;
?? ??? ??? ?}
?? ??? ??? ?.son1{
?? ??? ??? ??? ?margin-top: 80px;
?? ??? ??? ??? ?background-color: burlywood;
?? ??? ??? ?}
?? ??? ??? ?.father2{
?? ??? ??? ??? ?margin-top: 80px;
?? ??? ??? ?}
?? ??? ??? ?.son3{
?? ??? ??? ??? ?margin-top: 80px;
?? ??? ??? ?}
?? ??? ??? ?.father3{
?? ??? ??? ??? ?margin-top: 80px;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="father1">
?? ??? ??? ?<div class="son1">我是son1</div>
?? ??? ?</div>
?? ??? ?<div class="father2">
?? ??? ??? ?<div class="son2">我是son2</div>
?? ??? ?</div>
?? ??? ?<div class="father3">
?? ??? ??? ?<div class="son3">我是son3</div>
?? ??? ?</div>
?? ?</body>
</html>

不是江南

2017-01-13

源自：CSS深入理解之margin 3-1

關注問題我要回答

1623

操作

收起

5 回答

SvenAs 回答被采納 +2 積分
2017-02-22

????????事實上，你這里的三個元素都沒有發(fā)生margin重疊，你把father1和son2加上margin-top，會發(fā)現(xiàn)，他們都沒有重疊了。margin重疊只發(fā)生在普通的block元素上，加上float雖然也會使元素block，但卻不是普通的block元素，應該是脫離文檔流的block元素,視頻前面也說了，float和absolute元素除外。把father1,2,3的float去掉。在每個盒子外面加一個盒子再加上float:left看看吧