css浮动和位置讲解(关于CSS浮动与取消浮动的问题)
类别:Web前端 浏览量:241
时间:2021-11-05 14:36:49 css浮动和位置讲解
关于CSS浮动与取消浮动的问题浮动的定义设置元素脱离正常的文档流,使元素向左或向右靠近。父元素的边缘,或者其他设置了浮动的元素的边缘
浮动解决的问题1.解决文字包围图片的问题
2.解决间隔问题
3.可以向左,或者向右排版
不采用浮动时:
采用浮动时:
采用的属性
采用的属性:float,属性值:right/left
浮动的高度塌陷问题及解决方法 高度塌陷问题
当父元素设置的高度与子元素设置的高度不同时,则会出现高度塌陷问题,插入一些文字时无法插入在正确的位置
高度塌陷导致标题无法出现在这个block的下方:
解决过后:
解决方法
伪元素清除浮动:
在父元素后设置伪元素清除浮动:
1.根据父标签设置display
2.再设置clear:both
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .parent{ width: 400px; height: 400px; margin: 0 auto; display: block; background: lightgray; } .parent:after{ content: ""; display: block; clear: both; } .child{ display: inline-block; width: 200px; height: 200px; background: lightblue; float: left; } </style> </head> <body> <li class="parent"> <li class="child"></li> <li class="child"></li> <li class="child"></li> </li> <h1>这是一个标题</h1> <li></li> </body> </html>
到此这篇关于CSS浮动与取消浮动效果的文章就介绍到这了,更多相关CSS浮动与取消浮动内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- css浮动边距加倍错误怎么办(详解CSS外边距折叠引发的问题)
- css浮动和位置讲解(关于CSS浮动与取消浮动的问题)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- css浮动布局和盒子(css 盒模型 文档流 几种清除浮动的方法实例详解)
- css浮动位置讲解(深入理解css布局之定位与浮动)
- cssfloat和position功能(理解CSS浮动float、定位position)
- 七夕的寓意(七夕的寓意)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
- 《内在美》后,一大波新韩剧来袭,李钟硕朴信惠宋慧乔玄彬回归(一大波新韩剧来袭)
- 给孩子选购保温杯,注意这4个步骤,比颜值更重要(给孩子选购保温杯)
- 保温好 容量大 颜值高 保温杯你给娃娃买对了吗(保温好容量大颜值高)
- 《道德经》 人生避开骄狂,才能免去祸患(道德经人生避开骄狂)
热门推荐
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- sublime text常用插件
- 使用Console命令调试JS
- css 页面加载样式(如何只在IE上加载CSS样式表)
- 做网站是使用nginx还是apache(web服务器软件Apache与Nginx的对比分析)
- html5自定义字体图标(HTML5给汉字加拼音收起展开组件的实现代码)
- vuejs组件使用教程交流(Vue vee-validate插件的简单使用)
- python 装饰器模式(python重试装饰器的简单实现方法)
- php array只能放一种类型的数据(浅谈PHP array_search 和 in_array 函数效率问题)
- python中的迭代器详解(Python通过for循环理解迭代器和生成器实例详解)