浮动以及清除浮动

一、三种传统布局方式:
普通流(标准流)根据标签特性从上到下排列
浮动(改变元素标签默认的排列方式)
定位

二、float 创建浮动框

float: left/right;

特性:
1.离标准流的控制(浮)移动到指定位置(动):脱标
2.浮动的盒子不会保留原先的位置(“飘”起来了)
3.如果多个盒子设置了浮动,则按照属性值一行内显示并且顶端对齐排列
4.浮动元素具有行内块特性
5.任何元素都可以浮动
6.如果块级盒子没有设置宽高,默认与父级100%,但添加浮动后,宽随内容决定
7.浮动的盒子中间没有间隙
8.浮动元素不会盖住文字,文字会自动环绕在浮动元素周围
9.不能使用(margin: auto)居中,用定位控制,让一个浮动元素居中,在外套一个同样大小的div
**网页布局策略:**先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
**注意:**一个盒子中有多个子盒子,其中一个盒子浮动,其他兄弟也应该浮动。浮动的盒子不影响前面的标准流只影响后面的标准流。

三、清除浮动

当父盒子没有设置高度,子元素浮动,会造成塌陷
1、父级添加overflow:hidden;
2、额外标签法:在浮动元素末尾添加一个空标签(必须是块级元素)

<div style="clear:both/left/right"></div>

3、父级加伪元素

div::after {content:""; display:table;clear:both;}

既解决外边距重合问题,又清除浮动

.one::before,.one::after {content:""; display: table; clear: both;}

四、显示隐藏

不占位置:

display:none; //隐藏元素
display: block ; //显示被隐藏元素

opacity : 0-1 ; //控制透明度 但是会占位置

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值