Code Better

切换日光/暗黑模式

浮动 ​

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

浮动

css
float: none | left | right;

none 不浮动（默认值）
left 左浮动
right 右浮动

  • 什么是浮动？

    float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

    浮动最开始产生的原因是实现 图文环绕：浮动的元素不会遮挡文字，文字会被向右 推出。

  • 浮动特性

    • 浮动元素会脱离标准流，不再保留原先的位置。
    • 浮动的元素会一行内显示，可以设置宽高并且元素顶部对齐
      • 注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
    • 浮动的元素会具有行内块元素的特性
    • 浮动元素的大小根据内容来决定
    • 浮动元素不能通过text-align:center或者margin:0 auto让浮动元素水平居中。

  • 浮动元素经常和标准流父级搭配使用

  • 浮动布局注意点

    • 浮动和标准流的父盒子搭配。 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
    • 一个元素浮动了，理论上其余的兄弟元素也要浮动。 一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动，以防止引起问题。

    浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动 ​

css
clear: left | right | both;

  • 为什么需要清除浮动? 由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

  • 本质：清除浮动的本质是清除浮动元素脱离标准流造成的影响：浮动的子标签无法撑开父盒子的高度

  • 注意:

    • 如果父盒子本身有高度，则不需要清除浮动
    • 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。
    • 父级有了高度，就不会影响下面的标准流了

  • 清除浮动策略是?

    • 闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

  • 清除浮动的多种方式

    1. 直接设置父元素高度
    • 优点：简单粗暴，方便
    • 缺点：仅限于父元素的高度是固定的
    1. 额外标签法（隔墙法） 在父元素内容的最后添加一个块级元素，并给添加的块级元素设置clear: both，或者在父元素内容的最后添加一个<br />标签。
    css
    <div style="clear:both"></div>
<br clear='all'>
    • 优点：通俗易懂，书写方便
    • 缺点：添加许多无意义的标签，结构化较差
    • 增加无意义的标签，不推荐使用。
    1. 给父元素添加 overflow 属性
    css
    overflow: hidden | auto | scroll;

    • 可以给父级添加

    • 优点：代码简洁

    • 缺点：无法显示溢出的部分

    1. 单伪元素清除法
    css
    .clearfix::after {  //::after 方式是额外标签法的升级版，给父元素添加。
	content: "";
	display: block;
	clear: both;
	height: 0;  //高度为0，不占任何空间。（浏览器兼容性，有些浏览器伪元素会有默认高度）
	visibility: hidden;  //隐藏元素，继续占有原来位置，在网页中看不到伪元素，因为有些浏览器伪元素默认是一个圆点。
}

.clearfix { /* IE6、7 专有 */
  /*zoom是IE里的特有的属性，IE不支持伪元素，IE里zoom设置为1就是清除浮动*/
	*zoom: 1;
}
    • 优点：没有增加标签，结构更简单，直接给父元素标签加类即可清除浮动。
    • 缺点：照顾低版本浏览器
    • 代表网站：百度、淘宝网、网易等
    1. 双伪元素清除法
    css
    //给父元素添加
.clearfix::before,
.clearfix::after { 
	content:"";
	display:table;
}
.clearfix::after {
	clear:both;
} 
.clearfix {
	*zoom:1;
}
    • 优点：代码更简洁
    • 缺点：照顾低版本浏览器
    • 父子标签都是块级，子级加margin会影响父级的位置。::before解决外边距塌陷问题

  • （扩展补充）BFC的介绍

    • 块格式化上下文（Block Formatting Context）：BFC

      • 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

    • 创建BFC方法：

      1. html标签是BFC盒子

      2. 浮动元素：float除none以外

      3. 行内块元素是BFC盒子

        • display 为 inline-block、table-cells、flex

      4. overflow属性取值不为visible

      5. 绝对定位元素：position（absolute、fixed）

    • BFC盒子常见特点：

      • BFC盒子会默认包裹住内部子元素（标准流、浮动）------- 应用：清除浮动
      • BFC盒子本身与子元素之间不存在margin的塌陷现象------- 应用：解决margin的塌陷

©2024 Dancy Su