zoukankan      html  css  js  c++  java
  • 父元素如何围住浮动子元素

                     父元素如何围住浮动子元素

    细节:父类是浮动的话根据继承关系,则父类里边的子类跟着父类一起浮动;但是子类都是浮动的话,

    父类不设置浮动的则子类会脱离父类容器;解决:在父类容器中设置位置的子类为非浮动子类。(把浮动想象成泡沫体)

    bug出现:父元素如何围住浮动子元素(当元素使用float属性,将脱离文档流,因此父元素(没有设置宽高时)便不会包围它。~父容器高度塌陷)

    最常用的解决方法:父容器添加伪类after的属性:设置 空content、块属性,以及清除两边的浮动;

    另外一种解决方式:在父容器的最后添加非浮动的清除元素

       第三种方法是给父元素最后添加一个非浮动的子元素,然后清除该子元素。由于父元素一定会包含非浮动的子元素,

    通过把这个子元素放在浮动元素的下方,就可以保证父元素一定会包住这个元素,同时也会包住前面的浮动元素。

    举例子:

    li全浮动-》bug:

    案例:就是li是浮动的,结构ul放的nav容器(父容器),直接被挤到上面,而不是被li的大小撑大!

    解决:nav里边需要在搞一个div块,什么都不放,但是设置它的属性是clear:both;

                           

    参考文章:https://www.itdaan.com/blog/2018/10/04/10f224e2497531561836951e8fa0ae96.html 

                    《父元素如何围住浮动子元素

    参考老九学堂:《8.5 解决父级边框塌陷的方法》的各种解决方法(实际应用上面已经写明,即下面的方法3伪类after那个方案啦)

     

  • 相关阅读:
    python,jsonpath提取json数据
    [.Net] Web API 本地化与全球化
    缺省源
    组合恒等式
    20210925衡阳八中多校联测
    codeforces赛后总结——1556D. Take a Guess
    codeforces赛后总结——1556C. Compressed Bracket Sequence
    阿里云(Ubuntu20.04)搭建wordpress全流程——附图超详细版
    Linux常用命令行操作
    阿里云服务器增加监听端口
  • 原文地址:https://www.cnblogs.com/shan333/p/15001780.html
Copyright © 2011-2022 走看看