Web前端基础2-浮动

最新推荐文章于 2024-08-22 17:01:19 发布

梦幻之光_dream

最新推荐文章于 2024-08-22 17:01:19 发布

阅读量1k

点赞数

分类专栏： Web前端开发

本文链接：https://blog.csdn.net/William_fang/article/details/115286330

版权

本文详细介绍了Web前端中的浮动基础，包括两列布局、浮动属性、清除浮动的方法及伪元素的使用。通过实例展示了如何应用浮动实现布局，并探讨了浮动与滚动条的结合。此外，还提到了浮动可能导致的父元素塌陷问题及其解决方案。

摘要由CSDN通过智能技术生成

1.浮动基础

①两列布局：两个盒子都设置了左浮动，就会出现在同一行。
②两个盒子的宽度之和不能超过页面的宽度，如果超过了，第二个盒子就会出现在第二行。
③因为在一行内，想要容纳两个盒子，就必须小于总宽度。
④如果只有一个盒子的话，盒子宽度超过页面宽度，就会增加页面宽度。

float属性：
左浮动（left）
右浮动（right）
上浮动（top）
下浮动（bottom）
…

①clear的意思：清除浮动。
②clear属性：
left（清除左侧浮动）
right（清除右侧浮动）
both（清除左右两侧的浮动）
none（默认值，允许两侧有浮动）
inherit（从父元素继承clear属性的值）
③clear的用处：可以解决浮动元素的塌陷。

例如一个父元素包含了浮动元素，它将会塌陷，解决方法如下。
①在浮动元素后加个div设置clear: both; height:0;
②使用clearfix;   这个方法要添加.clearfix{zoom1;}
③设置父元素浮动

④浮动元素由于脱离了普通的文档流，不再占用原来文档中的位置，因此无法把父元素撑开。

①在类选择器后面可以加上:after，例如.clear :after{ }
②伪元素：对一个看不到的元素进行浮动清除。

float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
</head

关注

专栏目录