美文网首页
高度塌陷及其解决(导航条)

高度塌陷及其解决(导航条)

作者: 栀心_d553 | 来源:发表于2019-12-16 11:42 被阅读0次

    父元素的高度可以比子元素小,子元素可以把它撑开,

    塌陷指的是:父元素包不住子元素


    BFC开启后具有特性:(块的格式化)

    1、父元素的垂直外边距不会和子元素重叠

    2、开启BFC的元素不会覆盖其他的元素

    3、开启BFC的元素可以包含浮动的子元素


    如何开启BFC?

    1、设置元素浮动

    2、设置元素绝对定位

    3、设置元素为inline-block

    4、将元素的overflow设置为一个非visible的值,经常使用的是hidden

    (当父元素包不住子元素的时候,给父元素设置overflow和zoom)

    推荐第四个,副作用小


    IE6及以下的浏览器使用haslayout,只要设置宽度就会默认开启,不会塌陷

    zoom:1;

    两个都写上,就可以解决所有浏览器的塌陷


    ul.nav>(li>a)*4 简写
    .nav li{}后代元素选择器
    右浮动,所有的字顺序也会颠倒


    查色:右键,检查,点击:hover,

    相关文章

      网友评论

          本文标题:高度塌陷及其解决(导航条)

          本文链接:https://www.haomeiwen.com/subject/ierlnctx.html