CSS（浮动、盒子模型、样式）

最新推荐文章于 2023-02-13 17:38:33 发布

会上树的老张

最新推荐文章于 2023-02-13 17:38:33 发布

阅读量256

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_45557130/article/details/127503240

版权

本文介绍了CSS中的浮动概念，旨在使块级元素在同一行排列，并详细阐述了浮动的原理和如何清除浮动。接着，文章讨论了CSS盒子模型，包括margin、border、padding和content的构成。此外，还提到了display属性、table样式和列表样式的应用。最后，通过一个轮播图案例展示了CSS在布局设计中的实际应用。

摘要由CSDN通过智能技术生成

1、浮动
浮动就是让块级标签不独占一行。目的：把块级标签元素可以排在一行上。

2、浮动的原理
让元素脱离文档流，不占用标准流

3、float的属性值
left：左浮动
right：右浮动
none：默认值，不浮动

4、清除浮动
浮动后，后面的元素不会显示在下一行
清除浮动的目的：让后面的元素自动掉到下一行。
方法：

（1）添加空标签，并设置样式：clear:both;
		clear:left; 清除左浮动
		clear:right; 清除右浮动
		clear:both; 清除左右浮动
		clear:none; 左右浮动都不清除
（2）在要清除浮动的父级添加样式：overflow:hidden;
	overflow:hidden; 超出部分隐藏，也可以用来清除浮动
	overflow:sccroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
	overflow:auto; 不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动
	overflow：visible; 默认值，内容不会被修剪，会程序在元素框外，不剪切也不添加滚动条
（3）使用:after
找到要清除浮动的父级，在后面添加伪元素
父级:after{
	content:'';
	display:block;
	cle