资讯专栏INFORMATION COLUMN

构建静态页面 之 [ 浮动 ]

snowell / 3610人阅读

摘要:浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置属性表示设置元素浮动属性值表示设置元素左浮动属性值表示设置元素右浮动设置浮动的元素会脱离文档流,指定元素后面的元素会自动向前,形成重叠的显

浮动 描述

是对页面布局的一种表现方式

设置浮动的元素会脱离文档流

设置浮动的元素会改变后面元素的显示位置

float属性

表示设置元素浮动

left属性值 - 表示设置元素左浮动

right属性值 - 表示设置元素右浮动

设置浮动的元素会脱离文档流,指定元素后面的元素会自动向前,形成重叠的显示效果


    
    浮动
    


元素类型的浮动 块级元素浮动

垂直方向排列改为水平方向排列

显示宽度由父级宽度的 100% 变为 0(在没设宽的情况下)


    
    元素类型的浮动
    


内联元素浮动

允许设置宽度和高度


    
    元素类型的浮动
    


行内块级元素浮动

去掉了元素之间的间隙


    
    元素类型的浮动
    


父子关系的浮动

子级元素的浮动范围,不能超出父级元素的所在区域范围

父级元素浮动,子级元素也会跟随父级一同浮动


    
    父子关系的浮动
    


兄弟关系的浮动

如果下一个兄弟元素浮动,下一个兄弟元素不会超过上一个兄弟元素所占的区域位置


    
    兄弟关系的浮动
    


高度塌陷

父级元素没设高度,子级元素设置浮动 - 父级元素会高度塌陷

高度塌陷 - 仅存在父子关系中

解决方法

为父级元素设置高度

开启BFC环境

浮动可以开启 - 脱离文档流

将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题

overflow属性 属性值为hidden时可以开启 - 解决内容溢出

设置绝对定位可以开启 - 脱离文档流

注意:开启BFC方法所带来的副作用


    
    高度塌陷
    


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113815.html

相关文章

  • 构建静态页面 [ 浮动 ]

    摘要:浮动描述是对页面布局的一种表现方式设置浮动的元素会脱离文档流设置浮动的元素会改变后面元素的显示位置属性表示设置元素浮动属性值表示设置元素左浮动属性值表示设置元素右浮动设置浮动的元素会脱离文档流,指定元素后面的元素会自动向前,形成重叠的显 浮动 描述 是对页面布局的一种表现方式 设置浮动的元素会脱离文档流 设置浮动的元素会改变后面元素的显示位置 float属性 表示设置元素浮动 ...

    Scliang 评论0 收藏0
  • 构建静态页面 [ 布局 ]

    摘要:布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素(text-a...

    andot 评论0 收藏0
  • 构建静态页面 [ 布局 ]

    摘要:布局描述表示对页面中的显示效果进行一些排列水平方向居中垂直方向居中居中布局水平方向居中第一种方式水平居中行内块级元素水平居中的第一种方法该方法需作用在父子结构中为父级设置属性为子级设置属性注意的问题属性是设置文本内容对齐方式的 布局 描述 表示对页面中的显示效果进行一些排列 水平方向居中 垂直方向居中 居中布局 水平方向居中 第一种方式 水平居中 + 行内块级元素(text-a...

    JessYanCoding 评论0 收藏0
  • 静态页面架构】CSS定位

    摘要:架构浮动是以属性设置容器指定的位置当前元素设置为浮动后,只影响当前元素后面的所有元素的位置块级元素不再独占一行,多元素之间会水平方向排列设置浮动后,会从页面的文档流脱离默认宽度是父级宽度的高度是后者的所有元素高度之和左浮动宽度默认是 CSS架构 1.浮动; 是以float属性设置容器指定的位置 div { width: 200px; ...

    scq000 评论0 收藏0
  • 前端面试题目汇总

    摘要:线程在执行过程中与进程还是有区别的。但是线程不能够独立执行,必须依存在应用程序中,由应用程序提供多个线程执行控制。从逻辑角度来看,多线程的意义在于一个应用程序中,有多个执行部分可以同时执行。 关于js 1.原型链 2.AJAX请求数据时解决缓存的办法3.js的继承 ...

    lastSeries 评论0 收藏0

发表评论

0条评论

snowell

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<