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外边距折叠引发的问题)
- cssfloat和position功能(理解CSS浮动float、定位position)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- css浮动位置讲解(深入理解css布局之定位与浮动)
- css浮动和位置讲解(关于CSS浮动与取消浮动的问题)
- 学好汉语拼音,从娃娃绕口令抓起,平时还是要多练 收藏好(从娃娃绕口令抓起)
- 仙女们的私藏鲜法大PK 鲜香切块牛肉(仙女们的私藏鲜法大PK)
- 天热没胃口 这道菜开胃又下饭,2个小技巧新手一学就会(这道菜开胃又下饭)
- 指天椒紫苏爆炒牛肉(指天椒紫苏爆炒牛肉)
- 谷雨前,吃牛羊肉别忘了吃河鲜,除湿还清热,加紫苏一炒特解馋(吃牛羊肉别忘了吃河鲜)
- 紫苏牛肉锅里滚一滚,香的鼻子都要掉了(紫苏牛肉锅里滚一滚)
热门推荐
- HttpModule的作用
- php 抽象类和接口(php抽象类和接口知识点整理总结)
- ftp服务器可以用吗(FTP服务器存在的风险你知道吗?)
- thinkphp实战教程之博客技术学习(python3编写ThinkPHP命令执行Getshell的方法)
- wampserver命令行进不去(Win10无法启动wampserver怎么办)
- css3语法结构(CSS3中的注音对齐属性ruby-align用法指南)
- dedecms添加广告栏(织梦DedeCMS v5.7 完美实现导航条下拉菜单的方法)
- myisam和innodb的区别
- mysql 死锁原因(MySQL锁等待与死锁问题分析)
- win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法(win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法)