子div与父div之间的关系

今天用div学习首页布局,整个页面分为三块,中间区域为红色(看不到,被覆盖)又分为两大块,绿色和紫色使用了float元素,将中间区域定义为父div,绿色和紫色分别为子div,当他们各自的高度出现变化时,呈现出来的页面布局会有什么变化?

首页布局

1、当子div高度低于父div时:

父div不会缩小,原本的底色也被落了出来

2、当子div高度高于父div时

子div不会被父div束缚,会按照原本设置的高度呈现,并将与父div同一辈的div挤出总的div

3、当父div高度低于原本的高度,宽度也比原来宽时

与红色同辈的黄色div被掩盖在绿色和紫色div之下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容