float:left/right
html部分 <div class="wrapper"> <div class="content1">1</div> <div class="content1">2</div> <div class="content1">3</div> </div> <div class="wrapper"> <div class="content2">1</div> <div class="content2">2</div> <div class="content2">3</div> </div> css部分 .wrapper{ width: 300px; height: 300px; border: 1px solid black; margin-bottom: 50px; } .content1{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; } .content2{ float: right; color: #fff; background-color: black; width: 100px; height: 100px; } 文字环绕图片 HTML部分 <img src="pic.jpg" class="img">Google News is a news aggregator app developed by Google. It presents a continuous flow of articles organized from thousands of publishers and magazines. Google News is available as an app on Android, iOS, and the Web. Google released a beta version in September 2002 and the official app in January 2006. Google News is a news aggregator app developed by Google. It presents a continuous flow of articles organized from thousands of publishers and magazines. css部分 img{ float: left; width: 300px; }
浮动元素产生浮动流
所有产生浮动流的元素，块级元素看不到他们。产生了bfc的元素和文本类属性（inline）的元素以及文本能看到浮动元素。 HTML部分 <div class="box1"></div>123 <div class="box2"></div> css部分 .box1{ float: left; width: 100px; height: 100px; background-color: black; opacity: 0.5; } .box2{ width: 150px; height: 150px; background-color: blue; }因为浮动流，父级元素包不住子集元素 解决办法 消除浮动流clear:both;(必须是块级元素才能消除浮动流) 方法一
html部分 <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <p></p> </div> css部分 .wrapper{ margin-top: 100px; border: 1px solid black; } .content{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; } p{ clear: both; }方法二
HTML部分 <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div> css部分 .wrapper::after{ content: ""; clear: both; display: block; } .wrapper{ margin-top: 100px; border: 1px solid black; } .content{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; }方法三 利用bfc
html部分 <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> </div> css部分 .wrapper{ float: left; /* poaition: abolut; */ margin-top: 100px; border: 5px solid green; } .content{ float: left; color: #fff; background-color: black; width: 100px; height: 100px; }方法三与方法一二不同的原因：
position:abolute; float:left/right;在内部元素会被转化为inline-block元素
伪元素存在于任意元素中 在伪元素中可以输入任何css代码
HTML部分 <span> 这是span元素 </span> css部分 span::before{ content: "这是逻辑最前的伪元素，属于span"; } span::after{ content: "这是逻辑最后的伪元素，属于span"; }white-space: nowrap;到达容器边界不换行； overflow: hidden;溢出部分隐藏； text-overflow: ellipsis;溢出部分打点显示。
HTML部分 <p>北京：借鉴健康码，北京为促进高校毕业生就业推出“京尤码”</p> css部分 p{ width: 300px; height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }background-repeat:repeat(默认平铺)/repeat-x/repeat-y/no-repeat;
html部分 <div class="img1">123</div> <div class="img2">123</div> css部分 .img1{ width: 400px; height: 400px; border: 1px solid black; background-image: url(pic.jpg); background-size: 200px 200px; background-repeat: repeat-x; margin-bottom: 30px; } .img2{ width: 400px; height: 400px; border: 1px solid black; background-image: url(pic.jpg); background-size: 200px 200px; background-repeat: no-repeat; margin-bottom: 30px; }调整图片位置：background-position:x y/left top/center center/...;
.img1{ width: 400px; height: 400px; border: 1px solid black; background-image: url(pic.jpg); background-size: 200px 200px; background-repeat: no-repeat; background-position: center center; }