css清除浮动的方法介绍

您所在的位置:网站首页 如何清除ul的浮动 css清除浮动的方法介绍

css清除浮动的方法介绍

#css清除浮动的方法介绍| 来源: 网络整理| 查看: 265

css清除浮动的方法介绍 发布时间:2020-03-24 11:16:59 来源:亿速云 阅读:865 作者:小新 栏目:web开发

css如何清除浮动?为了让大家更加了解css清除浮动的方法,小编给大家总结了以下内容,一起往下看吧。

css清除浮动的方法介绍

1、给父级元素设置高度

效果图:

css清除浮动的方法介绍

代码:

* { padding: 0; margin: 0; } .header { height: 30px; line-height: 30px; background-color: #333; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding-right: 20px; } 首页 文章 问答 帮助 关于

2、外墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动

注意:添加了clear样式的块级元素添加不了 margin 外边距属性

效果图:

css清除浮动的方法介绍

代码:

* { padding: 0; margin: 0; } .header { /* background-color: #333; */ } .header a { /* color: #fff; */ text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .clearfix { height: 10px; background-color: red; clear: both; } .main { color: #fff; height: 100px; background-color: blue; } 首页 文章 问答 帮助 关于 主要内容

3、内墙法 :使用一个空白块级元素上添加css样式 clear 清除浮动

效果图:

css清除浮动的方法介绍

代码:

* { padding: 0; margin: 0; } .header { background-color: #333; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .clearfix { clear: both; } 首页 文章 问答 帮助 关于

内墙法 相对于 外墙法 有相对优点:

内墙法 设置后,浮动元素的父级元素会被撑开,也就是说有了高度

4、给浮动元素的父元素添加 overflow:hidden

效果图:

css清除浮动的方法介绍

代码:

* { padding: 0; margin: 0; } .header { background-color: #333; overflow: hidden; } .header a { color: #fff; text-decoration: none; } ul { float: right; } li { float: left; list-style: none; padding: 5px 20px; } .main { color: #fff; height: 100px; background-color: blue; } 首页 文章 问答 帮助 关于 主要内容

关于css清除浮动的方法介绍就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css 浮动 上一篇新闻:Openstack Mitaka安装手顺(4)计算服务 下一篇新闻:简单又实用的java代码生成器分享 香港云服务器 10000元红包免费领

红包可用于(云服务器、高防服务器、裸金属服务器、高防IP、云数据库、CDN加速)购买和续费

猜你喜欢 如何使用js制作动态无缝轮播 用js实现调节音量滑块的方法 js实现简单的表格增删效果的方法介绍 js实现简单的秒表效果的代码分享 js判断一个对象是否是数组(函数)的方法 使用js实现简易计算器的代码分享 JavaScript利用键盘事件实现人物行走的代码 js实现滑动门效果的详细代码分享 使用js判断打开项目的浏览器类别的代码 js数组方法slice()的使用方法介绍


【本文地址】


今日新闻


推荐新闻


    CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3