ITPub博客

首页 > IT职业 > IT职场 > css布局相关测试--主要针对浮动知识点

css布局相关测试--主要针对浮动知识点

IT职场 作者:古月雪 时间:2021-09-09 09:00:32 0 删除 编辑




编程练习3-5:类似腾讯软件中心布局

<!--
float浮动脱离了标准文档流,其实可以理解为,浮在了标准文档流的上层结构,进行移动。
w3school中对浮动的定义比较准确:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
理解上面两句话,就理解了浮动。
浮动可能产生的意外现象有:
1、由于脱离文档流,所以父容器是不被撑开的,就成了一条线,导致父容器的背景、边框、边距不生效
2、由于普通文档流已经不包括浮动元素,所以会导致浮动元素后面的非浮动元素会无视浮动元素而直接顶上。可能会产生重叠的效果。
对于上面两种情况的处理方法有:
对于父元素的处理,设置父元素的height属性或者overflow: hidden;
对于后续元素的顶上处理,设置后续元素的clear:both,消除它的浮动影响。
-->
头部
我是左侧的内容,不设置高度,自适应!哦我是左侧的内容,
我是右侧的内容,不设置高度,自适应哦!我是右侧的内容

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3711/viewspace-2798548/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-07-09

  • 博文量
    160
  • 访问量
    1175