浮动

淅川
196 阅读6分钟

浮动.png

一、浮动定义

  • 浮动使元素向左或向右移动，周围元素重新排列。
  • 属性名：float，漂流、浮动的意思。
  • 属性值：
    • left 左浮动
    • right右浮动
    • none 不浮动
  • 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。可触发BFC属性

二、浮动性质

01.脱离标准流

  • 脱离标准流，移动到指定位置，浮动盒子不保留原位置
  • 浮动元素比标准流高半级别会盖标准流(不会覆盖标准流里的内容)
  • 多个盒子设置浮动，会按属性值一行内显示且顶端对齐
  • 浮动元素相互贴靠在一起，不会出现空白折叠现象，如父级元素装不下，多出的会另起一行对齐
  • 如果元素不设置宽度，可以被元素内容自动撑开。
  • 浮动元素具有行内块特性
    • 任何元素都可以浮动，添加浮动有相似行内块元素特性
    • 块级元素未设置宽度，默认宽度和父级一样
  • 一个元素浮动，其他兄弟元素也浮动

02.没有margin塌陷

  • margin塌陷现象不出现在标准流中，浮动元素已经脱离标准流，不再具有margin塌陷现象 image.png
  • 元素浮动之后，脱离了标准流，会将原来占有的标准位置让给后面的一个同级元素 image.png
  • 由于浏览器中有兼容性问题，不会使用这种属性制作压盖效果 image.png
  • 如没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。

03. 没有字围现象

  • 与压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部有一些文字，浮动的盒子会压盖住另一个盒子的一部分，但是文字内容不会被盖住，另一个盒子中的文字会让开浮动盒子位置，围绕它进行加载。
  • 例：可以制作特殊图文混排布局效果 image.png

三、浮动存在的问题

  • 标准流中的元素，不设高度的情况下，会能被内部的标准流元素自动撑高。
  • 如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。 image.png
  • 父元素没有设置高度，会影响后面元素的标准流的位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

四、清除浮动

01.清除浮动一：height（不推荐）

  • 给标准流的父元素强制给一个合适的高度
  • 解决：父元素有了高度，前面的浮动不能影响后面的元素的标准流位置和贴边。
  • 问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。不适用于新闻列表等应用

02.清除浮动二：clear属性

  • clear,清除
  • 作用：清除标签元素自身受到的前面的浮动元素的影响，并且父元素不会受浮动影响，也不占用浮动让出的位置。
  • 属性值：
left清除前面左浮动带来的影响
right清除前面右浮动带来的影响
both清除前面所有浮动带来的影响

03.清除浮动三：隔墙法

  • 外墙法：在两个大的父盒子之间，添加一个空的标签，标签上带有clear:both 属性 解决：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离 问题：父元素无高度自适应
  • 内墙法：在父元素内部，所有的浮动子元素后面添加一个空的元素，标签高度为0，添加clear属性
    • 解决：父元素高度自适应，浮动影响后面的元素位置和贴边
    • 缺点：浮动是css样式属性带来的问题，内墙法使用HTML结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个设置没有语义的空标签，造成HTML结构的冗余

04.清除浮动四：伪类

  • 伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
  • ：：after：这个伪类表选中的是标签内部的最后位置·并且给::after 设置 clear:both; 。
  • 单位元素书写方法：
    • -需封装一个类:clearfix
    • 基本写法: clearfix:after{ content=:"" ; display:block; clear:both
    • 父元素调用.clearfix
  • 双位元素书写方法： clearfix::before, clearfix::after( content="" display:table; } clearfx::cafter{ clear:both; }
  • 将伪元素添加父盒子后面，一般给清除浮动的父盒子设置
  • 注意点:
    • 必须添加content:""属性，此属性中”"可写文字，也可加背景图，也可什么也不写
    • 伪元素默认是行内元素
  • 哪个标签需要则直接调用.clearfix

05.清除浮动五：溢出隐藏

  • 给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden;属性触发BFC，可以解决浮动的问题
  • overflow属性
    • 元素高度设置后，overflow：hidden;效果是将超过高度的部分直接隐藏。
    • 元素高度设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。
    • 高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
    • 浮动影响后面的元素：父元素有了高度后，可管理内部所有的浮动元素，不会延伸到后面标签中影响贴边。
  • 总结
    • 如果父元素高度是固定的，建议使用height属性解决
    • 如果父元素高度需要自适应，建议使用overflow属性解决浮动问题

06.CSS浮动及清除浮动

  • 问题一:(父元素中子元素都浮动)高度坍塌的原因
    • 没有给父元素添加高度。
    • 所有子元素全部浮动，脱离文档流，不在页面占位置，导致元素高度塌陷。
  • 问题二:如何解决高度塌陷？
    • 给父元素手动添加固定高度
    • 给父元素添加overflow:hidden
    • 在父元素结尾添加空标签div.并且设置{clear:both; heihgt:0; display:block;}
    • 给父标签添加伪元素 clearfix: :after { content:" ";
avatar
文章
阅读
粉丝