zoukankan      html  css  js  c++  java
  • CSS3学习笔记(九、浮动:float用于宏观布局续一)

    7.4页面简单布局
    1)实现纵向排列布局

    2)main模块中增加3个水平排列的模块

    7.5高度塌陷
    父元素的高度默认是被子元素撑开的。当子元素浮动后,完全脱离文档流。
    子元素从文档流中脱离将无法撑起父元素的高度,导致父元素高度丢失。
    父元素高度丢失后,其下的元素会自动上移,导致页面布局混乱。
    浮动前:

    浮动后,高度塌陷:

    高度塌陷是浮动布局中比较常见的问题,这个问题必须处理。

    7.6 BFC(Block Formatting Context)块级格式化环境
    BFC是css中的隐含属性,可以为元素开启BFC。开启BFC后,该元素会变成一个独立的布局区域。
    1)元素开启BFC后的特点:
    (1)开启BFC的元素,不会被浮动元素覆盖
    (2)开启BFC的元素,子元素的外边距不会和父元素的外边距重合
    (3)开启BFC的元素,可以包含浮动的子元素。

    2)开启BFC的方式:
    1)设置元素浮动(不推荐)。

    (2)设置元素为行内块元素(不推荐)。

    (3)将元素的overflow设置为非visible(visible是默认值),推荐使用hidden。overflow:hidden还可以溢出隐藏

    2)BFC演示:
    (1)开启BFC的元素,不会被浮动元素覆盖

    (2)开启BFC的元素,子元素的外边距不会和父元素的外边距重合
    父元素没有开启BFC,父元素的外边距受子元素影响:

    父元素开启BFC,父元素的外边距不受子元素影响

    4)BFC开启方式汇总(共14种):

  • 相关阅读:
    TransportClient基于Elasticsearch6.8.6 X-PACK
    elasticsearch6.8.6配置xpack(生成密钥)
    Java8 List排序
    ssh 免密码登录自动设置脚本
    Linux grep命令用于查找文件里符合条件的字符串
    [译]如何防止elasticsearch的脑裂问题
    APScheduler定时任务使用
    storm本地python开发环境搭建
    关于python反射的getattr,我终于想通了!
    利用sqlalchemy 查询视图
  • 原文地址:https://www.cnblogs.com/bdzxh/p/15691069.html
Copyright © 2011-2022 走看看