盒子模型——网页布局、浮动、如何开启BFC

目录

前述:

一、标准流(普通流/文档流)

二、浮动

1.浮动元素会脱离标准流(脱标)

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性

BFC是什么?

开启BFC方式:

BFC解决了哪些问题

三、清除浮动


前述:

传统网页布局的三种方式:

网页布局的本质----用css来摆放盒子,把盒子摆到相应位置

css提供了三种传统布局方式(简单易懂就是盒子如何进行排列顺序):

  • 标准流(普通流/文档流)
  • 浮动
  • 定位

一、标准流(普通流/文档流)

所谓的标准流:就是标签按照规定好默认方式排列

二、浮动

  float :  left    左浮动
  float :right   右浮动
  float : none  默认 不浮动

1.浮动元素会脱离标准流(脱标)

脱离标准流的控制(浮)移动到指定位置(动),俗称脱标浮动的盒子不再保留原先的位置

2.浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动,那么他们会按照属性值一行内显示并且顶端对齐排列

 注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,那么多出的盒子就会另起一行对齐。

3.浮动的元素会具有行内块元素的特性

任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后就会具有行内块元素的特性 

如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接给高度和宽度

如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动之后,它的大小根据内容来决定

当父元素没有高度,子元素都浮动,就会引起父元素坍塌:(可以通过开启BFC来解决) 

BFC是什么?

http://t.csdn.cn/NTbO5http://t.csdn.cn/NTbO5

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响,因此, 当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

开启BFC方式:

  • overflow的值不是visible的其他值
  • display值是inline-block . table、 table-cell、flex
  • float的值不是none的其他值

BFC解决了哪些问题

  1. margin重叠问题
  2. 浮动带来的父元素高度坍塌的问题
  3. BFC还可解决多栏问题

BFC当然还能解决更多问题,等涉及到后将会继续更新。 

三、清除浮动

清除浮动
   1.给父元素加height
   2.给父元素加overflow:hidden
   3.在所有有浮动的元素后加一个空元素div,给此空元素添加样式clear:both
     

clear:left   /* 清除左浮动 */
clear:right  /*    清除右浮动 */
clear:both    /* 清除左、右浮动 */

   4.给父元素添加伪元素,在此伪元素上清除浮动

.clearfix::after{
    display:block;
    content:"";
    clear:both;

你可能感兴趣的:(CSS,大前端,web前端基础,css,前端,学习)