2.27笔记

浮动

一,标准流标准流就是浏览器默认布局的方式,也就是从上往下,从左向右的默认的排班布局的方式。

二,浮动布局方式浮动的本质:就是解决图片和文字并排的格式问题。

元素浮动后,会脱离标准流,但是还会影响标准流的布局。浮动的元素会不占据标准流的空间。但是会影响标准流中的文本的排版.

三,浮动的特性

1.浮动脱离标准流,不占位置,但会影响标准流。浮动只有左右浮动。

2. 浮动的元素A排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。

3.一个父盒子里面的子盒子,如果其中一个子级有浮动的,则其他子级都需要浮动。这样才能一行对齐显示。

4.浮动根据元素书写的位置来显示相应的浮动。

5. 元素添加浮动后,如果没有设置宽高的话,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。

6.浮动具有破坏性,元素浮动后,破坏来原来的正常流布局,造成内容塌陷。如果一个标准流的父盒子,没有设置高的情况下,所有的子盒子进行了浮动,那么父盒子的高度会塌陷成0.

四,解决浮动破坏性造成的高度塌陷的问题1,在父盒子上设置overflow: hidden;之后,父盒子具有的包裹性,就不会出现高度塌陷的问题了。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,870评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,932评论 0 6
  • 当你再一次暗示男友送你“5.20”礼物时,他仍旧不解,你发送了一张因怒火而微微涨红的小脸,他不明所以地赔笑着:“宝...
    诗凉阅读 953评论 3 4
  • 生活并不复杂 如果能落实到吃饭上 无非是早中晚三餐 与闺蜜吃饭 约个日子组个局 我能安静 她能嚣张 我可以清纯 她...
    初之阅读 253评论 2 0
  • 2016年12月1日 周四 婆婆一直提醒我,你爸不住走了,房子别空着租出去吧。婆婆性子比我还急,于是我写了一张租房...
    魅力春天阅读 248评论 0 1