H5 66-清除浮动方式二

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>66-清除浮动方式二</title> <style> *{ margin: 0; padding: 0; } body{ border: 1px solid #000; } .box1{ background-color: red; } .box…

一.伪元素选择器 1.什么是伪元素选择器伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指定标签的内容前面添加一个子元素标签名称::after{ 属性名称:值: } 给指定标签的内容后面添加一个子元素我们举个例子: div{ width:200px; height: 200px; background-color: red; } /*p{*/ /*width: 50px;*/ /…

前端之float的几种清除浮动方式

前端之float的几种清除浮动方式本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ bac…

第五篇：web之前端之float的几种清除浮动方式

前端之float的几种清除浮动方式前端之float的几种清除浮动方式本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html> <html lang="en&quo…

css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是…

H5 70-清除浮动方式五

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>70-清除浮动方式五</title> <style> *{ margin: 0; padding: 0; } /* div{ width: 100px; height: 100px; background-color: red; overflow…

H5 69-清除浮动方式四

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>69-清除浮动方式四</title> <style> *{ margin: 0; padding: 0; } .box1{ background-color: red; /*margin-bottom: 10px;*/ } .box2{ back…

H5 67-清除浮动方式三

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>67-清除浮动方式三</title> <style> *{ margin: 0; padding: 0; } .box1{ background-color: red; /*margin-bottom: 10px;*/ } .box2{ back…

H5 65-清除浮动方式一

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>65-清除浮动方式一</title> <style> *{ margin: 0; padding: 0; } .box1{ height: 20px; background-color: red; } .box2{ background-colo…

css清除浮动方式总结

1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max…