CSS布局（1）常用布局方法和浮动布局

CSS学习 本文总阅读量次

CSS布局

  • CSS布局是CSS知识体系的重中之重
  • 早期以table为主（简单）
  • 后来以技巧性布局为主（难）
  • 现在又flexbox/grid（偏简单）
  • 响应式布局是必备知识（适配移动端）

常用布局方法

  • table 表格布局
  • float 浮动 + margin
  • inline-block 布局
  • flexbox 布局

table 表格布局

以前的表格布局不推荐使用，但是遇到实在解决不了的问题可以使用红框内的方法来实现“表格”布局：
表格布局对比
（可以通过在.table-cell中添加vertical-align：middle使表格内部文字垂直居中）

布局属性

盒模型

可参考笔记CSS盒模型

display、position属性

flexbox 布局

  • 完整笔记可参考CSS flexbox
  • flexbox,即 弹性盒子。这些盒子本来就是并列的，不需要特殊设置，只需要指定宽度即可。
  • 但兼容性不好，需要写很多兼容的代码。

flexbox 父容器

  • display:flex;定义flexbox父容器。

flexbox子项

  • flex:1，flex为简写属性，但一般只需要将 flex 设置为 auto，initial，none，或一个无单位正数 即可。如果写多个flex属性值，那他是有顺序要求的！（CSS flexbox）
  • 想让子项固定大小可设置flex为none然后给定width。

float 布局

  • 完整笔记可参考CSS 浮动
  • float属性值有left、right。

特性

  • 拥有 float属性 的元素脱离文档流但不脱离文本流。
  • float属性 会使元素形成“块”，能使内联元素也可设置宽高（给span元素添加float属性后可以设置宽高）【也就是改变元素的display属性值为inline-block】
  • float属性对自身的影响：元素**位置会尽量靠上，然后再根据属性值尽量靠左/右.**（具体体现在三列浮动中）
  • float属性对兄弟元素的影响：

元素脱离文档流但不脱离文本流

  • 使用float属性后，元素会脱离文档流（像绝对定位那样，不会对其他元素造成影响，文档中不会为他预留位置（他会和别的元素重叠并位于上方）），但不脱离文本流，也就是说他会影响其他元素的文本（会占据其他元素文本的空间）。
  • 这个特性是float本身创造出来的作用，它可以帮助我们实现文字环绕图片的效果。

例子：
绿色是靠左浮动，红色是普通div。可以看到绿色浮动元素并未占据文档中的位置，他和红色元素重叠了。但是绿色浮动元素占据了红色普通div中文字的空间，文字部分并未重叠。
绿色是靠左浮动，红色是普通div

float属性 使元素形成“块”

【也就是改变元素的display属性值为inline-block】

给span元素添加float属性后可以设置宽高：
例子

float属性对自身元素的影响

  • float属性的元素位置会尽量靠上，然后再根据属性值尽量靠左/右.
  • 注意：如果是三列浮动，前面两列最好指定left，第三列指定right。如果第二列和第三列都指定right，那么第二列会显示在最右边，而第三列会显示在中间。因为第二列源代码顺序上比第三列等级要高 (DOM上第二列先出现并声明了float: right;) ，所以在浮动顺序上也会比第三列等级要高。又因为两者同时像右浮动，所以第二列就会更加地靠右。

例子：
代码
效果
可以看到第一个float尽量靠上显示了，第二个float由于必须要把span中的元素显示出来的关系，他只能挨着span尽量靠上，然后再靠左边。

不能靠上的情况
float的元素时尽量靠上，那么当我们的float宽度太大的时候，没办法靠着红色span也就只能向下走了。

float属性对兄弟元素的影响

  • 上面贴非float元素
  • 旁边贴float元素
  • 不影响其他块级元素位置
  • 影响其他块级元素内部文本

以上影响都可以从上一个例子体现出来。

float属性对父级元素的影响

  • float元素会从布局上“消失”
  • 父级元素高度塌陷（假设一个float元素是100px的高度，那么他会希望父级元素能撑开100px的高度，但是因为float元素脱硫文档流，所以如果父级里没有其他元素能撑起100px的高度，那么父级高度就会变成0）

解决父级元素高度塌陷

通过overflow属性控制父元素宽高

我们可以让父元素能控制自己的宽高。给父级元素设置overflow:auto，则父级元素会关注内部的元素，当内部元素超出时进行滚动。（当然overflow:hidden也可以）

在float元素后清除浮动

可参考笔记清除浮动( clear 属性)

通过给float元素使用**::after 伪元素**来清除浮动：

1
2
3
4
5
6
7
8
.clearfix::after {
    content:"."; 
    display:block; 
    height:0; 
    visibility:hidden; 
    clear:both; 
    }
.clearfix { *zoom:1; }
  • ::after的意思是在.clearfix内部的最后加入伪元素::after
  • 首先要显示伪元素，所以display:block(display默认inline)
  • 然后为伪元素加入空内容，以便伪元素中不会有内容显示在页面中，所以， content:""；(.也可以，只要加上visibility:hidden;)
  • 其次，为使伪元素不影响页面布局，将伪元素高度设置为0，所以， height:0
  • 最后，要清除浮动，所以，clear:both。

after伪元素其实是通过 content 在元素的后面生成了内容为一个点的块级元素。这样一来只要设置这两个非浮动元素之间的距离就行了。

CSS学习