博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS浮动专题!
阅读量:5954 次
发布时间:2019-06-19

本文共 975 字,大约阅读时间需要 3 分钟。

在css中,浮动问题可能是很多刚入门的小白比较头疼的问题。

1,首先先来介绍一下两种浮动类型:左浮动和右浮动

  1) float:left;左浮动,后面的内容会流向对象的右侧

  2) float:right; 右浮动,后面的内容会流向对象的左侧

  举例来说,三个块级元素,第一个设置浮动后,第一个块级元素将不再占用块级位置,第二个将会取代第一个的位置

2,由于浮动会使浮动对象后面的布局错乱,因此引入了清除浮动: clear:both;

注意:下面是设置浮动后常见的几个问题

  (一)设置浮动后在一行的两个块级元素 会因为浏览器窗口 大小的改变 而改变其原来的位置

    解决方法:将两个块级元素放在同一个父级盒子里

  (二)当两个块级元素都设置了浮动并且设置了 margin:0 auto;(水平居中),结果并不是居中效果

    解决方法:将两个块级元素放在同一个父级盒子里

  (三)两个设置了浮动的块级元素 的 父级元素在 没有指定高度 时,将不会自动补齐高度

    解决方法1:给这两个块级元素下面增加一个空的块级标签(设置clear:both;)来消除浮动对父级元素的影响

    解决方法2:给父级元素增加 overFlow:hidden; 属性 (注意:如果子元素使用了定位布局就很难实现)

    解决方法3:利用给父级元素添加伪元素after方法 

         代码示例:

.clearFix:after{
clear:both; display:block; visibility:hidden; height:0; line-height:0; content:"."; }.clearFix{
zoom:1;//解决IE6/7兼容问题 }

以上就是我给初学者总结的css浮动专题

  

  

  

 

 

  

转载于:https://www.cnblogs.com/wccc/p/6749692.html

你可能感兴趣的文章
MediaPlayer的错误修复
查看>>
网络安全之***手法计中计
查看>>
Struts2拦截器的使用 (详解)
查看>>
我的友情链接
查看>>
OEL7.2下Oracle11.2.0.4RAC部署
查看>>
nagios安装与配置
查看>>
RedHat 设置IP、网关、DNS
查看>>
MYSQL 主从复制读写分离实现
查看>>
linux更改语言
查看>>
centos7 修改mac地址
查看>>
<script>标签的加载解析执行
查看>>
恢复rm删除的文件(ext3
查看>>
账户注销完自动登录账户,并且不需要再点击屏幕的账户头像
查看>>
【Interface&navigation】按钮(29)
查看>>
Extjs4.x (MVC)Controller中refs以及Ext.ComponentQuery解析
查看>>
Server-01 How to Find the Remote Desktop Port
查看>>
Java--接口、抽象与继承
查看>>
通过IP判断登录地址
查看>>
Oracle闪回技术
查看>>
利用单壁路由实现vlan间路由
查看>>