上QQ阅读APP看书，第一时间看更新

How it works...

In this simple recipe, we have four areas that repeat the same HTML structure, with the exception of different .float-*-* classes used on the <img> tags in each of the four sections.

To clear floats, we use the .clearfix class on each of the <section> elements. These elements are parents of the floated <img> tags. As explained in the documentation, you need to use the .clearfix class on the parent of a floated element. For more information, please refer to the following address: https://v4-alpha.getbootstrap.com/utilities/clearfix/.

The first image has the following .float-*-* classes present: .float-left, .float-sm-right, .float-md-left, .float-lg-right, and .float-xl-left. If we resize the browser window, we can observe the effect these classes have on our floated <img> element. This results in our image being floated left on the smallest screens, which is determined by the .float-left class. Next, on the sm breakpoint and up, it is floated right. For md breakpoint and up, it is again floated left. This goes on, with the image switching to the opposite side on each wider breakpoint.

To understand this behavior better, we need to look at the official docs which list the breakpoint sizes, found at https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints.

Looking at the docs, we can see that the image is floated left until it reaches the sm breakpoint, at about 575 pixels. Then, it floats right and it stays right till about 767 pixels. At md sizes (767-991 pixels), it is floated left. Between 991 and 1199 pixels, it is floated right, and finally, over 1199 pixels, at xl sizes, it is floated left again.

In section two of the recipe (in step 2), there are no .float-*-* classes in use, and thus the image stacks on top of the paragraph. Even though <img> is an inline element, it still stacks on top of the <p> tag since <p> is a block element.

In section three of the recipe (in step 3), we change this behavior of the <p> tag, by adding the .d-inline class to it. It is interesting to observe the result of this change.

Finally, in section four, we are alternating the float classes, just like in section one. However, this time we are also adding the .float-*-none classes, which add the float: none !important; to the image at sm screen widths (between about 551 pixels and 767 pixels), and at lg screen widths (between about 991 pixels and 1199 pixels).

Besides the various .float-* classes used in this recipe, we also use the .img-fluid class, which in Bootstrap 4 does what .img-responsive did in Bootstrap 3, which is to make sure that the image responds to viewport changes.

We also use the class of .rounded-circle, which turns our image into a circle (by giving the image it is applied to a border-radius property with the value of 50%).

In section four, instead of .rounded-circle, we use just the class of .rounded, which results in our image having its original squared shape, with rounded corners.