Web前端基础2-浮动

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

1.浮动基础

两列布局

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

浮动(float)

float属性:
左浮动 (left)
右浮动(right)
上浮动(top)
下浮动 (bottom)

清除浮动(clear)

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

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

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

伪元素

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

2.浮动案例

float.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
</head
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值