margin-top无效的解决方法

先上代码：

        <div id="content" style=" width:750px; height:300px; background:#C29A29; margin-top:100px; margin-left:150px;">
            <ul class="clearfloat" style="border-top:#630 solid 2px; border-bottom:#630 solid 2px; padding:2px 0 2px 0; margin-top:10px;">
                <li class="contentNav" ><a href="">我是张三</a></li>
                <li class="contentNav" ><a href="">我是李四</a></li>
                <li class="contentNav" ><a href="">那我只能是王五了</a></li>
            </ul>
        </div>

要实现的效果是一个大概居中的div里面一排导航，给ul的margin-top不论怎么设置都是无效，百度之:

　　两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
　　1.两个或多个
　　说明其数量必须是大于一个，又说明，折叠是元素与元素间相互的行为，不存在 A 和 B 折叠，B 没有和 A 折叠的现象。
　　2.毗邻
　　是指没有被非空内容、padding、border 或 clear 分隔开，说明其位置关系。
　　注意一点，在没有被分隔开的情况下，一个元素的 margin-top 会和它普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻； 只有在一个元素的 height 是 "auto" 的情况　　　　下，它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。
　　3.垂直方向
　　是指具体的方位，只有垂直方向的 margin 才会折叠，也就是说，水平方向的 margin 不会发生折叠的现象。

 

这里感谢前端攻城狮丁小倪在那啥上的回答，不过本人不认识他，估计也@不到，就算了。

　　解决方法：

　　茴香豆有几种写法忘了，这个据说有四种方法，晓得一种就行，其他的可能会坑。　　

　　给父级元素加：overflow:hidden

 

 

 

转载于:https://www.cnblogs.com/canrz/p/3527896.html